javascript - ホバーアウト機能

Question

jQuery("#markets_served").hover(function(){
    jQuery.data(document.body, "ms_height", jQuery(this).height());
    if(jQuery.data(document.body, "ms_height") == 35) {
        jQuery(this).stop().animate({height:'195px'},{queue:false, duration:800, easing: 'easeOutQuad'});
        jQuery("#btn_ms_close").css("display","inline");
    }
});

jQuery("#btn_ms_close").hover(function(){
    jQuery.data(document.body, "ms_height", jQuery("#markets_served").height());
    jQuery("#markets_served").stop().animate({height:'35px'},{queue:false, duration:800, easing: 'easeOutQuad'});
    jQuery(this).css("display","none");
});

ホバリングの問題。動作しません。ホバー時に表示されるコンテンツからマウスが外れると、ホバーアウトしません。

http://uscc.dreamscapesdesigners.net/-下部の例「対象市場」

Answer 1

jQuery サイトのhover宣言を見てください。mouseover および mouseout イベントのハンドラを一度に指定できます。高さを計算したり、表示される新しい div に別のハンドラーをバインドしたりする必要はありません。

$("#markets_served").hover(
  function () {
    //do this when over
  },
  function () {
    //do this when out
  }
);

Answer 2

使用方法は次のとおりです。

$('#el').hover(function(e) { /* hover; */ }, function(e) { /* unhover */ });

ここにドキュメントがあります

Answer 3

マウスが入ってくると、div の高さを増やしますが、マウスが div の外にあるときはリセットしないため、問題が発生します。

次のようにする必要があります。

jQuery("#markets_served").hover(
    function(){
        jQuery.data(document.body, "ms_height", jQuery(this).height());
        if(jQuery.data(document.body, "ms_height") == 35) {
            jQuery(this).stop().animate({height:'195px'},{queue:false, duration:800, easing: 'easeOutQuad'});
            jQuery("#btn_ms_close").css("display","inline");
        } , 
    function(){
            jQuery.data(document.body, "ms_height", jQuery("#markets_served").height());
            jQuery(this).stop().animate({height:'35px'},{queue:false, duration:800, easing: 'easeOutQuad'});
            jQuery("#btn_ms_close").css("display","none");
        }


    });

Answer 4

または、データなしでより単純に:

jQuery("#markets_served").hover(function() {
    jQuery(this).stop().animate({height:'195px'},{queue:false, duration:800, easing: 'easeOutQuad'});
    jQuery("#btn_ms_close").css("display","inline");
}, function() {
    jQuery(this).stop().animate({height:'35px'},{queue:false, duration:800, easing: 'easeOutQuad'});
    jQuery("#btn_ms_close").css("display","none");
});