Question

我试图构建一种幻灯片，点击链接“.animate”会改变它的位置（每次100px以上）

这：

$(function(){
    $('#m-main').click(function(){
        $('slide').animate({top : "100px"}, {duration:500})
    })
});

只会工作一次。

我怎样才能使这个工作？

非常感谢你的帮助。

Answer 1

$(function() {
    $('#m-main').click(function(){
        $(this).data($(this).data('pos') + 100);
        $('slide').animate({top : $(this).data('pos') + 'px'}, {duration:500})
    })
});

Answer 2

当它运行时，它将顶部填充设置为100px，因此在第一次之后它只是将其设置为已有的相同值。您需要每次都增加值。

$(function(){
  $('#m-main').click(function(){
    var current = $('slide').css('top');
    current = current + 100;
    $('slide').animate({top : current+"px"}, {duration:500})
  })
});

高于未经测试的代码

Answer 3

尝试使用计数器而不只是top : "100px"。它只是做了一次，因为基本上你的设置顶部到100px然后再设置顶部到100px，这只是保持它的位置。你希望它移动到200px然后移动到300px等。

试试这个：

var fromTop = 100;

$(function() { fromTop = fromTop + 100; $('#m-main').click(function() { $('slide').animate({top : '"' + fromTop + 'px"'}, {duration:500}) }) });

Answer 4

看起来你在点击处理程序中的查询字符串中有一些错误。 $('slide')会选择所有<slide>个元素，我认为你没有，可能$('.slide')或$('#slide')是你所追求的？

如果你只是保留你想要移动元素的位置的参考，并且每次增加100（参见混沌的答案）那么你应该是对的。

Answer 5

$(function(){
var pos=100;
    $('#m-main').click(function(){
        $('slide').animate({top : pos+'px'}, {duration:500});
    pos=pos+100;
    });

});

Answer 6

试试这个：

$('#m-main').click(function(){
    var slide = $('.slide', this),
        posY = parseInt(slide.css("background-position").split(" ")[1]);
    slide.stop().animate({backgroundPosition: "0 "+(Math.ceil(posY/100)*100 + 100)+"px"}, {duration:500});
});

每次点击都有不同的背景位

6 个答案: