我已经为此工作了几个小时,但我不确定还能做什么。我有 5 张图像要在屏幕上旋转。如果您向下单击文本,图像将移动到正确的位置。但是,如果我再次单击它,图像会向随机方向发射。我的问题是,我的代码有什么问题。或者更好的是,我做错了吗?有没有一种我看不到的更简单的方法。我创建了一个有效的 jsfiddle 示例 http://jsfiddle.net/2uPJP/13/
相关js代码...
function convert () {
var $hide1 = $(".hide1");
var $hide2 = $(".hide2");
var $hide3 = $(".hide3");
var $hide4 = $(".hide4");
var $hide5 = $(".hide5");
$hide1.removeClass().addClass("hide2");
$hide2.removeClass().addClass("hide3");
$hide3.removeClass().addClass("hide4");
$hide4.removeClass().addClass("hide5");
$hide5.removeClass().addClass("hide1");
}
$(document).ready(function() {
$('.hide1').animate({
top: '+=100',
right: '+=100'
}, 1500);
$('.hide5').animate({
bottom: '+=100',
right: '+=100'
}, 1500);
$('.down').click(function() {
$('.hide1').animate({
left: '+=100'
}, 1500);
$('.hide2').animate({
top: '+=100'
}, 1500);
$('.hide3').animate({
top: '+=100'
}, 1500);
$('.hide4').animate({
right: '+=100'
}, 1500);
$('.hide5').animate({
bottom: '+=200'
}, 1500);
setTimeout(convert, 1501);
});
});
最佳答案
请看这个http://jsfiddle.net/2uPJP/16/ ,注意动画队列。在 1500 次内单击两次时,您将动画附加到错误的元素动画队列
function convert() {
var $hide1 = $(".hide1");
var $hide2 = $(".hide2");
var $hide3 = $(".hide3");
var $hide4 = $(".hide4");
var $hide5 = $(".hide5");
$hide1.removeClass("hide1").addClass("hide2");
$hide2.removeClass("hide2").addClass("hide3");
$hide3.removeClass("hide3").addClass("hide4");
$hide4.removeClass("hide4").addClass("hide5");
$hide5.removeClass("hide5").addClass("hide1");
}
$(document).ready(function () {
$('.hide1').animate({
top: '+=100',
left: '-=100'
}, 1500);
$('.hide5').animate({
top: '-=100',
left: '-=100'
}, 1500);
$('.down').click(function () {
convert()
$('.hide2').animate({
left: '+=100'
}, 1500);
$('.hide3').animate({
top: '+=100'
}, 1500);
$('.hide4').animate({
top: '+=100'
}, 1500);
$('.hide5').animate({
left: '-=100'
}, 1500);
$('.hide1').animate({
top: '-=200'
}, 1500);
});
});
关于javascript - 循环浏览一组带有动画的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13504769/