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