跳跃动画jquery

我目前正在处理这个删除按钮，但由于某些原因，当单击并悬停该按钮时，jquery动画表现得有点“跳跃”。我想知道这是什么原因造成的

---

[编辑]thanx很多人，请查看最终结果！：[/EDIT]

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

在JSFIDLE中玩代码时，我删除了

$fx.off

。另外，关于MrOBrians的观点，我在执行任何动画之前添加了名为

.stop（）

`$（函数（）{

}))`

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

然而，我无法在调整大小之前缩小按钮的宽度，即使按钮已经达到了预期的大小。它仍然希望在调整到90之前加入。如果光标定位在按钮上的某个点上，导致打嗝和意外的跳跃动画，则会触发mouseleave事件

无论如何，我不确定这是否是jquery中的一个带有按钮的bug，或者是否有解决方法。但我要做的是把按钮改成DIV，然后一切都开始顺利进行

删除

您仍然可以通过使用

$（'#formID'）.submit（）来实现这一点或
$.ajax（）

以下是一个工作示例

.stop（）
无论何时做任何动画都是你的朋友
$。fx.off
在你使用它的地方不会做任何事情，因为它是一个需要赋值的变量（即
$.fx.off=true
），并且不做你似乎期望它做的事情（全局关闭所有动画，不停止任何当前正在运行的动画）。此外，您没有为回调定义
事件
参数，这会导致错误。此按钮实际上是要删除重要内容时显示的丑陋大弹出窗口的替代品。“你确定要删除这个吗？”所以当离开按钮时，它会恢复到原来的状态。杰米，太棒了！标签似乎真的是问题所在。谢谢你帮我。接下来，我计划在第一次点击垃圾桶时，将垃圾桶的盖子掀开。听起来很不错，我想看看它的实际效果。按钮也做得不错。这是最终结果！我想知道你怎么看。。。我发现了这个叫做SwitchClass的方便的Jquery UI效果！这让事情变得容易多了。。。正如您所见，现在可以在css选择器上制作动画。
$(".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");
    }
});

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

    });
});​