JQuery Анимация продолжает вычитать - PullRequest
Новая
       16

JQuery Анимация продолжает вычитать

0 голосов
/ 21 февраля 2012

Я пытаюсь анимировать элемент списка так же, как и mseselect, но кажется, что он продолжает вычитать 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();

});

});

есть идеи?

1 Ответ

0 голосов
/ 21 февраля 2012

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

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

http://jsfiddle.net/ytYmT/

Вместо того, чтобы увеличивать высоту на 2 пикселя, а затем уменьшать ее на 2 пикселя после завершения анимации, я просто сохранил исходное значение высоты, увеличил его на 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"); 
                }); 
            });
...