好吧所以我在课堂上有一张包含3张图片的表格。每个人都有一个不同的ID(#effect1,2,3),我试图在onclick上设置动画。这是我目前的代码,但第二个动画存在问题。
$('#effect1').click(function() {
$(this).finish();
$(this).animate({ right: 200 });
$('#effect2, #effect3').animate({ left: 1000 });
});
现在这段代码,应该以一种方式为#effect1制作动画,而另外两种以相反的方式制作动画(在屏幕外),第一种是动画效果,但第二种和第三种效果不会生成动画。它们在盘旋之后移动到最终位置。如果您在点击第一个之前将鼠标悬停在它们上面,它们将正常动画。
编辑:JSFIDDLE http://jsfiddle.net/9EqNy/24/
答案 0 :(得分:0)
您需要为同时运行的动画禁用队列:
$('#effect1').click(function() {
$(this).finish();
$(this).animate({ right: 200, queue : false });
$('#effect2, #effect3').animate({ left: 1000, queue : false });
});
来自jQuery API文档:
queue(
default: true
)Type:Boolean或String一个布尔值,指示是否放置 效果队列中的动画。如果为false,则动画将开始 立即
[编辑] 试试这个:
$('#effect1').click(function() {
$(this).finish();
var self = this;
setTimeout(function(){
$(self).animate({ right: 200, queue : false })
},1);
setTimeout(function(){
$('#effect2, #effect3').animate({ left: 1000, queue : false });
},1);
});
答案 1 :(得分:0)
Juste添加位置:3个DIV的CSS中的相对位置:
#effect1 {
width:100px;
height:100px;
background-color:red;
position:relative;
}