1 
$('#closecallout').click(function() {
    $('.callout').animate({"right" : "-260px"}, 500).addClass('calloutclosed');
});
$('.calloutclosed').hover(function() {
    $(this).animate({"right" : "0px"}, 500);
}, function() {
    $(this).animate({"right" : "-260px"}, 500);
});

クリック機能は、コールアウトボックスを「非表示」にすることを目的としており、その後、ホバーするとフォーカスに戻ります。

ホバー機能が機能しないのはなぜですか？これらは両方とも内にあるからjQuery(function($){ });ですか？

これを修正するには、どのような手順を実行する必要がありますか？

http://jsfiddle.net/R5Dmu/

どうもありがとうSO

4

2 に答える 2

5

現在のクラスに基づいて要素でイベントをトリガーするには、でイベント委任を使用する必要があります.on()。

$('#closecallout').click(function() {
    $('.callout').animate({"right" : "-260px"}, 500).addClass('calloutclosed');
});
$(document).on('mouseover', '.calloutclosed', function() {
    $(this).animate({"right" : "0px"}, 500);
}).on('mouseout', '.calloutclosed', function() {
    $(this).animate({"right" : "-260px"}, 500);
});

デモ

于 2013-01-06T23:07:14.227 に答える
2

クリック関数を呼び出す場合クラスを追加し、ホバー関数を実装する必要があります。コードにクリックイベントでクラスを追加しましたが、ホバー関数を実装していません。ドキュメントの準備ができた状態でホバー関数を実装すると、クリックイベントがまだ発生していないため、Jqueryはcalloutclosedクラスのセレクターを見つけることができます。

これをチェックして：

jQuery(function ($) {

//CALLOUT
$('#closecallout').click(function () {
    $('.callout').animate({
        "right": "-260px"
    }, 500)
    $('.callout').addClass('calloutclosed');

    $('.calloutclosed').hover(function () {
        $(this).animate({
            "right": "0px"
        }, 500);
    }, function () {
        $(this).animate({
            "right": "-260px"
        }, 500);
    });

});
});
于 2013-01-06T23:07:35.977 に答える