0

私は現在、この削除ボタンに取り組んでいますが、何らかの理由で、ボタンをクリックしてホバリングすると、jquery アニメーションが少し「ジャンプ」します。何が原因なのかしら..

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

[編集] 多くの人に感謝し、最終結果をチェックしてください!: http://jsfiddle.net/myyn5/232/ [/編集]

4

2 に答える 2

1

問題はjQueryのサイズ変更ボタンにあります。

jsfiddleでコードを操作すると、削除しまし$fx.offた。また、MrOBriansのポイントについては、.stop()アニメーションを実行する前に、callを追加しました。

`$（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/

于 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 に答える