Question

我正在处理这个删除按钮，但由于某种原因，当点击并将鼠标悬停在按钮上时，jquery动画会有点'跳跃'。我想知道是什么造成了这个......

[编辑]感谢很多人，查看最终结果！：http://jsfiddle.net/myyn5/232/ [/编辑]

Answer 1

问题在于jQuery调整大小按钮。

在jsfiddle中使用您的代码后，我删除了$fx.off。此外，关于MrOBrians的观点，我在执行任何动画之前添加了调用.stop()。

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

}）;`

还对css进行了一些更改，因为我的第一个想法是按钮上缺少定义的宽度。

但是，即使按钮已达到预期尺寸，我也无法在调整大小之前缩小按钮的宽度。它仍然希望在调整大小调整为90之前跳入。如果光标位于按钮上的某个点导致打嗝和意外的跳跃动画，则触发鼠标移动事件。

无论如何，我不确定这是一个带按钮的jquery中的错误，或者是否有一些工作。但我要做的就是将按钮更改为DIV，然后一切都开始变得很好。

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

您仍然可以在点击功能中使用$('#formID').submit();或$.ajax()来完成这项工作。

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

Answer 2

这是一个工作示例。 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");
            }
        }

    });
});

跳跃的动画jquery

2 个答案: