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