0

更新: コードを統合し、if/else ステートメントを追加しようとしました。私はまだマウスエンター/マウスリーブ機能を無視してクリックする方法を理解していません

$('#storybtn').on({
mouseenter:function(){
    $('#story')
        .stop()
        .animate({top:'405px'},'slow');
},
mouseleave:function(){
    $('#story')
        .stop()
        .animate({top:'435px'},'slow');
},
click:function(){
    var position = $('#story').css('top');
    if (position>'10px'){
    $('#story')
        .stop()
        .animate({top:'10px'},'slow');
        }
    else (position='10px'){
    $('#story')
        .stop()
        .animate({top:'435px'},'slow');
        }
    }
});
4

2 に答える 2

1

まず、構文.hover()は、新しいバージョンの jQuery では非推奨です。次に、新しいアニメーションをアクティブにする前に、他のアニメーションを停止する必要があります。そうしないと、前のアニメーションが終了するまでキューに入れられます。これを試して：

$('#storybtn').on({
    mouseenter:function(){
        $('#story')
            .stop()
            .animate({top:'405px'},'slow');
    },
    mouseleave:function(){
        $('#story')
            .stop()
            .animate({top:'435px'},'slow');
    },
    click:function(){
        $('#story')
            .stop()
            .animate({top:'10px'},'slow');
    }
});

これは.on()ハンドラー.click()を利用.hover()します。実物を使用することで、コードをまとめることができます。

于 2013-03-22T19:51:32.807 に答える
1

私はあなたのためにフィドルの例を作成しました：

フィドルの例

クリックが発生した後の mouseleave アニメーションを回避するために、クラス クリックを #story に追加し、if/else ケースを追加して、それをチェックするか、mouseleave 後に削除します。

 $('#storybtn').on({
        mouseenter: function () {
            $('#story')
                .stop()
                .animate({top: '405px'}, 'slow');
        },
        mouseleave: function () {
            if (!$('#story').hasClass('clicked')) {
            $('#story')
                .stop()
                .animate({top: '435px'}, 'slow');
            } else {
                $('#story').removeClass('clicked')
            }
        },
        click: function () {
            var position = $('#story').css('top');
            if (position > '10px') {
                $('#story')
                    .addClass('clicked')
                    .stop()
                    .animate({top: '10px'}, 'slow');
            } else if (position === '10px') {
                $('#story')
                    .addClass('clicked')
                    .stop()
                    .animate({top: '435px'}, 'slow');
            }
        }
    });
于 2013-03-22T22:43:14.220 に答える