0

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

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

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

4

2 回答 2

1

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

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

`$（函数（）{

$(".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 之前，它仍然想跳进去。如果光标定位在按钮上的某个点上，则会触发 mouseleave 事件，从而导致打嗝和意外的跳跃动画。

无论如何，我不确定这是否是带有按钮的 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/

于 2012-07-23T23:23:21.863 回答
0

这是一个工作示例。现场演示

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

    });
});​
于 2012-07-23T23:35:36.357 回答