所以我有几组动画在后台运行。但是,在用户动画期间,我希望暂停所有其他动画,以便浏览器可以呈现用户需要的最佳效果。
Element.mousein() --> Pause (NOT STOP) all animations except those related to Element
i.e. $(body).not(Element).pauseAnimations();
Element.mouseout() --> Resume all animations
i.e. $(body).not(Element).resumeAnimations();
就像这样http://tobia.github.com/Pause/但是,相反,暂停所有其他的,除了那个是悬停的
这对用户来说很难使用,因为他/她应该跟随移动的盒子保持它悬浮。但是比起定位,动画当然更有用。
无论如何,这里是一个修改版本的官方暂停插件演示在jsFiddle。
您应该在setupBox()
函数中做的是:
function setupBox(i) {
var $box = $('#box' + i);
function phase1() {
$box.animate({left: 100}, 1000, 'swing', phase2);
}
function phase2() {
$box.animate({left: 0}, 1000, 'swing', phase1);
}
// This pauses rest of the boxes except the targeted.
// I added a class ('box') to each element to easily select all boxes.
// You could also do: $('.demo').children() since all the children are boxes.
function pauseRest() {
$('.box').not('#box' + i).pause();
$box.resume();
}
$box.hover(function () {
pauseRest($box);
}, function () {
$('.box').resume();
});
phase1();
}
使用stop()的问题是你必须指定每个动画手册,但我刚刚发现这个(链接)显然允许停止所有当前动画。
$("button").click($.fx.off)
好吧,上面的解决方案并不好,因为你说它是一个通用选择器。
$("div:animated").not('#AnimationYouWantToContiune').stop();
请看看这个小提琴我设法添加3div是动画,当点击一个按钮,它会停止所有,但指定的div从动画。这有帮助吗?
你可以在需要的时候使用stop()来停止动画
像自己拥有它一样使用jQuery…
jQuery有选择器:这里没有描述
这是一个暂停插件的例子,暂停其他元素,而不是悬停在上面的元素;
<html>
<head>
<link rel='stylesheet' href='http://tobia.github.com/Pause/style.css'>
<script src='http://tobia.github.com/Pause/jquery-1.4.2.min.js'></script>
<script src='http://github.com/tobia/Pause/raw/master/jquery.pause.min.js'></script>
</head>
<body>
<div class="demo">
<div id="box1" class="boxy"></div>
<div id="box2" class="boxy"></div>
<div id="box3" class="boxy"></div>
</div>
<script type="text/javascript">
$(function() {
$(".boxy").each(function(){
$(this).hover(function() {
var id = $(this).attr("id");
$(":not(#" + id + ")").pause();
}, function() {
var id = $(this).attr("id");
$(":not(#" + id + ")").resume();
});
setupBox($(this));
});
function setupBox(elem) {
function phase1() {
elem.animate({ left: 450 }, 2000, 'swing', phase2);
}
function phase2() {
elem.animate({ left: 0 }, 2000, 'swing', phase1);
}
phase1();
}
});
</script>
</body>
</html>
您可以使用delay()函数来延迟队列中项目的执行,但这不是首选的方法。
如果可以的话,应该使用animate()方法中的回调函数。