Question

这是问题的实例：http://www.igabiba.si 如果您通过单击＆gt;更改特色图片按钮（下一个）动画第一次正确触发，但不会在以后的尝试中触发。稍后它会在设定的时间后跳过动画并在最终位置定位。

奇怪的是，上一个按钮的动画完美无瑕。

这是动画背景图片的代码部分（所有代码在源代码中都可见）：

if (mode == 'prev') {

                  $('#take_div').animate({
                    left: '-2000px',
                  }, 500, function() {
                    if (takeFields[2] != '') {
                        $('#take_link').attr('href',takeFields[2]);
                    }
                    $('#take_div').css('background',takeFields[1]+' url(/media/uploads/gTakeover/'+takeFields[0]+') no-repeat center top');
                    $('#take_div').css('left','');
                    $('#take_div').css('right','-2000px');
                    $('#take_div').animate({
                        right: '0px',
                    }, 500);
                  });

              } else {

                $('#take_div').animate({
                    right: '-=2000',
                  }, 500, function() {
                    if (takeFields[2] != '') {
                        $('#take_link').attr('href',takeFields[2]);
                    }
                    $('#take_div').css('background',takeFields[1]+' url(/media/uploads/gTakeover/'+takeFields[0]+') no-repeat center top');
                    $('#take_div').css('right','');
                    $('#take_div').css('left','-2000px');
                    $('#take_div').animate({
                        left: '0px',
                    }, 500);
                  });

              }

我很感激你的帮助。

Answer 1

在所有.animate（）函数前添加.stop（）并查看。

$('#take_div').stop().animate({
    right: '0px',
}, 500);

Answer 2

我设法找到了问题。在第一个动画之后，将“left”属性设置为0px是一个问题。它第二次运行它改变了“正确”的属性，但左边保持在0px，所以而不是：

$('#take_div').animate({
                right: '-=2000',
              }, 500, function() {
                if (takeFields[2] != '') {
                    $('#take_link').attr('href',takeFields[2]);
                }
                $('#take_div').css('background',takeFields[1]+' url(/media/uploads/gTakeover/'+takeFields[0]+') no-repeat center top');
                $('#take_div').css('right','');
                $('#take_div').css('left','-2000px');
                $('#take_div').animate({
                    left: '0px',
                }, 500);
              });

我这样做了：

$('#take_div').stop().animate({
                    right: '-2000px',
                  }, 500, function() {
                    if (takeFields[2] != '') {
                        $('#take_link').attr('href',takeFields[2]);
                    }
                    $('#take_div').css('background',takeFields[1]+' url(/media/uploads/gTakeover/'+takeFields[0]+') no-repeat center top');
                    $('#take_div').css('right','');
                    $('#take_div').css('left','-2000px');
                    $('#take_div').stop().animate({
                        left: '0px',
                    }, 500, function () {
                        $('#take_div').css('left','auto');
                    });
                  });

现在它运作顺利。感谢所有人的帮助。

Jquery动画第一次工作，但不是在那之后

2 个答案: