jQuery 队列控制函数：.queue()
2021-07-04 12:06
标签：java 动画 解决 rip src 结果 css color head .queue() 显示或操作匹配元素所执行函数的队列。 所以它和那些常见的animate()、fadeIn()、fadeOut()、slideUp()、show()、hide()动画函数，有什么区别？ 如果说， 当这条语句执行时，元素会立即开始其滑动动画，但是淡入过渡被置于 fx 队列，只有当滑动过渡完成后才会被调用。 这句话意思是，动画会先开始执行滑动，再进行淡入过渡。 那么用了queue()方法，能产生什么不一样的效果？ .queue() 方法允许我们直接对这个函数队列进行操作。调用带有回调函数的 .queue() 方法特别有用；它允许我们在队列末端放置一个新函数。 这个特性与动画方法提供回调函数类似，但是无需在动画执行时设置回调函数。 如果要执行的函数不仅仅是动画，还有文档操作比如append()，css属性操作呢。 来试验个最简单的。 div {width:40px; height:40px; 这个动画按照设定，是要这个 div 先缓缓出现，向右滑动，再执行css属性操作，改变背景颜色为蓝色。 然而这样写的结果，实际上是 div在出现前已经变成了蓝色。 因为一系列的动画函数会被放进一个队列中，我们管他叫 ‘fx‘, 而非动画函数，不会进入这个队列，它会先于队列函数执行。 而queue()就是来解决这个问题的。 queue()可以将非动画函数加进队列。 OK，这样就达到了我们要的效果。 再看上面那句话： 调用带有回调函数的 .queue() 方法特别有用；它允许我们在队列末端放置一个新函数。 这个特性与动画方法提供回调函数类似，但是无需在动画执行时设置回调函数。 我们加入的函数其实是一个关于队列的回调函数。这个回调函数可以放在动画函数里，作为动画函数的回调函数。 比如，queue队列函数： 等价于： 好吧，总算理解了。 jQuery 队列控制函数：.queue() 标签：java 动画 解决 rip src 结果 css color head 原文地址：http://www.cnblogs.com/dodocie/p/7120405.html
$(‘#foo‘).slideUp().fadeIn();
style>
background:green; }.newcolor { background:blue; }
style>
body>
div> div>
script>
$(document.body).click(function () {
$("div").show("slow");
$("div").animate({left:‘+=200‘},2000);
$("div").addClass("newcolor");
});
script>
body>
style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
style>
script type="text/javascript" src="/jquery/jquery.js">script>
head>
body>
请点击这里 ...
div>div>
script>$(document.body).click(function () {
$("div").show("slow");
$("div").animate({left:‘+=200‘},2000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({left:‘-=200‘},500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});script>
body>
语法： .queue(queueName,newQueue)
$(‘#foo‘).slideUp();
$(‘#foo‘).queue(function() {
alert(‘Animation complete.‘);
$(this).dequeue();
});
$(‘#foo‘).slideUp(function() {
alert(‘Animation complete.‘);
});
下一篇：day34-WEB框架