Jquery onClick fade toggle addClass removeClass
Jquery onClick fade toggle addClass removeClass
我对 js/jQuery 很陌生
我试图在单击时慢慢更改 div 元素的背景(-图像)。
我读了很多切换和淡入淡出的教程,但我没有理解。
感谢您的帮助。
<div class="col-xs-6 col-sm-6 mainchar">
<div id="jakob" class="jakob">
</div></div>
<script type="text/javascript">
$(document).ready(function(){
$("#jakob").click(function() {
if( $("#jakob").hasClass('jakob') ){
$("#jakob").stop().removeClass('jakob').fadeTo('slow', 1);
$("#jakob").stop().addClass('jakob2').fadeTo('slow', 1);
} else {
$("#jakob").stop().removeClass('jakob2').fadeTo('slow', 1);
$("#jakob").stop().addClass('jakob').fadeTo('slow', 1);
}
});
});
</script>
<style type="text/css">
div.jakob { background: #000 url('../img/jakob1.jpg') center center no-repeat; background-size: 80%; }
div.jakob2{background: #000 url('../img/jakob2.jpg') center center no-repeat; background-size: 80%;}
</style>
Use this jquery script to change div or image slow
use this scipt
你可以这样做
$('#test').on('click', function () {
$(this).fadeTo('slow', 0.3, function () {
$img = 'https://www.gravatar.com/avatar/24baf7f7e3cbc726fdfdff569cb809f2?s=32&d=identicon&r=PG';
$(this).css('background-image', 'url(' + $img + ')');
}).fadeTo('slow', 1);
});
我对 js/jQuery 很陌生 我试图在单击时慢慢更改 div 元素的背景(-图像)。
我读了很多切换和淡入淡出的教程,但我没有理解。
感谢您的帮助。
<div class="col-xs-6 col-sm-6 mainchar">
<div id="jakob" class="jakob">
</div></div>
<script type="text/javascript">
$(document).ready(function(){
$("#jakob").click(function() {
if( $("#jakob").hasClass('jakob') ){
$("#jakob").stop().removeClass('jakob').fadeTo('slow', 1);
$("#jakob").stop().addClass('jakob2').fadeTo('slow', 1);
} else {
$("#jakob").stop().removeClass('jakob2').fadeTo('slow', 1);
$("#jakob").stop().addClass('jakob').fadeTo('slow', 1);
}
});
});
</script>
<style type="text/css">
div.jakob { background: #000 url('../img/jakob1.jpg') center center no-repeat; background-size: 80%; }
div.jakob2{background: #000 url('../img/jakob2.jpg') center center no-repeat; background-size: 80%;}
</style>
Use this jquery script to change div or image slow
use this scipt
你可以这样做
$('#test').on('click', function () {
$(this).fadeTo('slow', 0.3, function () {
$img = 'https://www.gravatar.com/avatar/24baf7f7e3cbc726fdfdff569cb809f2?s=32&d=identicon&r=PG';
$(this).css('background-image', 'url(' + $img + ')');
}).fadeTo('slow', 1);
});