写了好多篇的学习笔记。也该动手练练,咱不能总是纸上谈兵。最近做了其他的一些练习,也是有涉及图片淡入淡出的,使用的是animate。 众所周知,jQuery所产生的动画效果默认会进入列队的。假如:点击一下,产生动画3秒钟。然后我快速的连点3次。那么要等到9秒钟,所有动画才能结束。animate是自定义动画,可以很容易的设定动画是否进入列队。但使用fadeIn和fadeOut就麻烦了。 <div id="div"> <img id="1" src="florian.jpg" style= "position:absolute;z-index:2;left:10px;top:10px;"/> <img id="2" src="kamil.jpg" style= "position:absolute;z-index:1;left:10px;top:10px;"/> </div>
$(document).ready(function () { $("div").hover( function () { $("#1").fadeOut(1000); }, function () { $("#1").fadeIn(1000); } ); });
function () { $("#1").dequeue().fadeOut(1000); }, function () { $("#1").dequeue().fadeIn(1000); }
function () { $("#1").stop().fadeOut(1000); }, function () { $("#1").stop().fadeIn(1000); }
function () { $("#1").stop(true,true).fadeOut(1000); }, function () { $("#1").stop(true, true).fadeIn(1000); }
function () { $("#1").stop().animate({ 'opacity': 0 }, 1000); }, function () { $("#1").stop().animate({'opacity':1}, 1000); } 或: function () { $("#1").animate({ 'opacity': 0 }, { queue: false, duration: 1000 }); }, function () { $("#1").animate({ 'opacity': 1 }, { queue: false, duration: 1000 }); }
|