CODEWITHSUNDEEP
jquerycssbuttontwitter-bootstrap
Jeroen
Jeroen

Reputation: 15

jumpy animation jquery

I'm currently working on this delete button, but for some reason the jquery animation acts a little 'jumpy' when clicking and hovering off the button. I wonder what's causing this..

http://jsfiddle.net/myyn5/3/

[EDIT] thanx a lot guys, check out the final result!: http://jsfiddle.net/myyn5/232/ [/EDIT]

Upvotes: 0

Views: 1311

Answers (2)

Dips
Dips

Reputation: 3290

Here is a working example. Live Demo

$(function() {

    $(".custom").on({
        click: function() {
            event.preventDefault(); //  Show span
            if (!$(this).hasClass('confirm')) {
                $("span").show();
                $(this).stop().animate({
                    width: 90 + 'px',
                }, 700, function() {
                    $("span").animate({
                        left: '+=22',
                        opacity: 1
                    }, 500, 'swing');
                    $(this).addClass("confirm");
                    $(this).removeClass("custom");
                })
            } else {

                $(this).removeClass("confirm");
                $("span").stop().animate({
                    left: '-15px',
                    opacity: 0
                }, 500, 'swing', function() {
                    $(".custom").animate({
                        width: 36 + 'px'
                    }, 500);
                });
                $(this).addClass("custom");
            }
        }

    });
});​

Upvotes: 0

Jamie
Jamie

Reputation: 1361

The issue is with jQuery resizing buttons.

Upon playing with your code in jsfiddle I removed $fx.off. Also, as to MrOBrians' point, I added called .stop() prior to performing any animation.

`$(function() {

$(".custom").on({
    click: function() {
        $("span").stop(true, true).show();
        $(this).animate({
            width: 90
        }, 700, function() {
            $("span").stop(true, true).animate({
                left: '18px',
                opacity: 1
            }, 500, 'swing');
            $(this).addClass("confirm");
            $(this).removeClass("custom");
        })
    },
    mouseleave: function() {
       $(this).removeClass("confirm");
        $("span").stop(true, true).animate({
            left: '-12px',
            opacity: 0
        }, 500, 'swing', function() {
            $(".custom").stop(true, true).animate({
                width: 18
            }, 500);
        });
        $(this).addClass("custom");
    }
});

});`

Also made some changes to the css as my first thought was that it was the lack of a defined width on the button.

However, I wasn't able to get the button's width from shrinking prior to resizing, even if the button was already at its intended size. It still wanted to jump in before sizing sizing to 90. This was triggering a mouseleave event if the cursor was to positioned at a point on the button causing a hiccup and an unintended jumpy animation.

Anyway I'm not sure if it's a bug in jquery with buttons or if there's somework around. But what I had to do was change the button to a DIV and then everything started playing nice.

<p> <div class="btn btn-danger custom"> <i class="icon-trash icon-white"></i> <span>Delete</span> </div> </p>

You could still make this work by using $('#formID').submit(); or $.ajax() in your click function.

http://jsfiddle.net/hAAwk/1/

Upvotes: 1

Related Questions