jquery animate keeps subtracting

Question

I'm trying to animate a list item the same way asmselect does but it seems to keep subtracting 2px from the height instead of plus minus

<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();

});

any ideas?

can u please show us complete code u r working on? – Avi Feb 21 '12 at 14:19 — Avi, Feb 21 '12 at 14:19

score 0 · Accepted Answer · answered Feb 21 '12 at 14:31

It seems that every time it animates, the li elements become smaller and smaller.

I don't know what your markup looks like so I made an attempt to reproduce it here:

http://jsfiddle.net/ytYmT/

Instead of incrementing the height by 2px, then decrementing it by 2px when one animation is completed, I've just stored the original height value, incremented it by 2, then restored it back to the orignal height.

           $('.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"); 
                }); 
            });

jquery animate keeps subtracting

1 Answers1