jQuery hide () затем animate (), затем show ()

Question

Почему это не работает

$("#right").click(function(){
  $("#sliderWindow").find("img").each(function(i) {
    var left = $(this).css("left");
    $("#imageContainer" + i).animate({"left": "+=220px"}, "slow");
    left = parseInt(left);
    left += 220;
    left = left + "px"; 
    $(this).css("left",left);
    left = $(this).css("left");

    if(left === "1220px") {
      //this is what doesnt work
      $(this).css("left", "-320px");
    }

Я сдвигаю ряд div с animate.Как только последний div достигнет абсолютной левой позиции: -1220px, переместите его обратно в начальную левую позицию: -320px.Он перемещается в правильную позицию, но мне трудно его скрыть.

РЕДАКТИРОВАТЬ: Причина, по которой я анимирую скрытый div, заключается в том, что анимация, похоже, не меняет CSS.Поскольку css не меняется, я не могу откатить последние объекты обратно в начало строки.Так как я могу получить animate () для этого, я пытаюсь скрыть последний div и показать его в начале строки.

решено:

$("#right").click(function() {
  $("#sliderWindow").find("img").each(function() {
     if (this.offsetLeft >= 1220) {
        $(this).css("left", "-320px");
    }
    $(this).animate({left: "+=220px"}, "slow");
  });
});

Answer 1

Прежде всего, это не принесет никакой пользы, чтобы оживить что-либо после того, как вы это спрячете. :)

Во-вторых, я считаю, что вам нужна функция обратного вызова animate. Если вы хотите, чтобы что-то произошло только после завершения анимации, вы делаете это следующим образом ...

$(this).animate({"left": "-320px"}, "slow", function(){ do_something; });

Допустим, у <div id="obj"> уже есть «позиция: абсолютная;», и вы хотите, чтобы она переместилась, а затем исчезла ...

$('#obj').animate({"left": "-320px"}, "slow", function(){ $(this).hide(); });

Answer 2

Решено это со следующим:

$("#right").click(function() {
$("#sliderWindow").find("img").each(function() {
  if (this.offsetLeft >= 1220) {
    $(this).css("left", "-320px");
  }
  $(this).animate({left: "+=220px"}, "slow");
});
});

Answer 3

Попробуйте использовать ...

if( parseInt(left) > 1219 ) {
   $(this).css("left", "-320px");
}

... в случае, если это не совсем 1220px?

Answer 4

Почему бы просто не установить новую позицию, поскольку, похоже, вы пытаетесь это сделать.

  if(left === "1220px") {
    $(this).css("left", "-320px");
  }

Answer 5

все анимации все выполняются мгновенно -> вам нужно использовать jQuery

   delay()

или

 setTimeout(function(){},timeInMillis);

например

if(left === "1220px") {
  var $this = $(this);
  $this.hide(200).delay(200).animate({"left": "-320px"}, 300,function(){
   $this.show();
  });
}