0

this is a live example of the problem: http://www.igabiba.si If you change the featured picture by clicking on the > button (next) the animation fires correctly the first time, but not on the later tries. Later on it just skips the animation and positions at the final position after the set amount of time.

Strangely enough, the animation of the previous button works flawlessly.

This is the part of the code that animates the background picture (all code is visible in the source):

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);
                  });

              }

I would appreciate some help with this.

4

2 回答 2

1

在所有 .animate() 函数前面添加 .stop() 并查看。

$('#take_div').stop().animate({
    right: '0px',
}, 500);
于 2013-06-13T08:43:53.207 回答
0

我设法找到了问题。在第一个动画之后，将“left”属性设置为 0px 是个问题。第二次运行时，它改变了“right”属性，但左边保持在 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');
                    });
                  });

现在它工作顺利。感谢大家的帮助。

于 2013-06-13T09:57:40.677 回答