JQuery одушевленные держит вычитание

Question

Я пытаюсь анимировать элемент списка так же, как asmselect делает, но это, кажется, продолжает вычитание 2px с высоты вместо плюс минус

<script type="text/javascript"> 
$(document).ready(function() { 

$('#name').change(function(){ 
    $('#name option:selected').each(function() {  


       /*$('.asmListItem').animate({ 
        opacity: "show", 
        height: "show" 
       }, 100, "swing", function() { 
        $('.asmListItem').animate({ 
         height: "+=2px" 
        }, 50, "swing", function() { 
         $('.asmListItem').animate({ 
          height: "-=2px" 
         }, 25, "swing"); 
        }); 
       });*/ 
       $('#select-to') 
        .append("<li class='asmListItem' value='"+$(this) 
        .val()+"'><span class='asmListItemLabel'>" + '<b>'+$('#subnam').val() + ' </b>' + $(this) 
        .text()+"</span><a href=# class='asmListItemRemove'>remove</a></li>"); 

     $(this).remove(); 
    }); 
}); 

$('.asmListItemRemove').live('click', function() { 
      $(this).closest('li').remove(); 

});

});

любые идеи?

Answer 1

Кажется, что каждый раз, когда он оживляет, элементы li становятся все меньше и меньше.

Я не знаю, что ваша разметка выглядит таким образом, я сделал попытку воспроизвести его здесь:

http://jsfiddle.net/ytYmT/

Вместо того, чтобы приращение высоты 2px, затем уменьшающую его 2px когда одна анимации завершено, я только что сохранил исходное значение высоты, увеличил его на 2, а затем вернул обратно к высоте оргинала.

  $('.asmListItem').animate({ 
       opacity: 'show', 
       height: 'show' 
      }, 100, "swing", function() { 
       var originalHeight = $('.asmListItem').height(); 
       $('.asmListItem').animate({ 
        height: originalHeight + 2 + "px" 
       }, 50, "swing", function() { 
        $('.asmListItem').animate({ 
         height: originalHeight + "px" 
        }, 25, "swing"); 
       }); 
      });