CODEWITHSUNDEEP
jqueryjquery-animatewidth
user_2215528
user_2215528

Reputation: 20007

Jquery, animate current div width with + 10px

I am trying to make a div get 10 px bigger than the current width of the div. So if I have multiple divs with different widths they dont all become 200 px, but the 140px div becomes 150px and the 210px div become 220px.

            $(function() {

            var $menu = $('#ldd_menu');
            $menu.children('li').each(function(){
                var $this = $(this);
                var $span = $this.children('span');
                $span.data('width',$span.width());

                $this.bind('mouseenter',function(){
                    $menu.find('.ldd_submenu').stop(true,true).hide();
                    $span.stop().animate({'width':'200px'},300,function(){
                        $this.find('.ldd_submenu').slideDown(100);
                    });
                }).bind('mouseleave',function(){
                    $this.find('.ldd_submenu').stop(true,true).hide();
                    $span.stop().animate({'width':$span.data('width')+'px'},300);
                });
            });
        });

Upvotes: 0

Views: 2912

Answers (2)

SachinGutte
SachinGutte

Reputation: 7055

You can use --

$span.stop().animate({'width':'+=10px',......});

10px bigger than the current size

+=10px is solution to that.

see demo

Upvotes: 1

insertusernamehere
insertusernamehere

Reputation: 23580

Instead of setting an absolute value, you can use an offset to the current width using +=[amount]px or -=[amount]px:

$span.stop().animate({ width: '+=10px' }, 300, function() {});
$span.stop().animate({ width: '-=10px' }, 300, function() {});

Upvotes: 3

Related Questions