Различные положения фона каждый клик

Question

Im пытаются построить своего рода слайд, где, когда нажмите на ссылку «.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". Он просто делает это один раз, потому что по существу ваш настройку вершины до 100 пикселей, а затем снова устанавливает верхнюю часть на 100 пикселей, которая просто держит ее там, где она есть. Вы хотите, чтобы перейти на 200px, а затем в 300px и т.д.

Попробуйте это:

вар 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}); 
});