jquery - div を slideDown() から防止する

Question

私は次のものを持っています：

http://jsfiddle.net/2sQGS/

マウスをホバーしたときに、宣伝用のボックスが下にスライドしたくないことを除けば、問題なく動作します。ブロックをホバリングしなくなったためだと思いますが、何らかのアクションから宣伝ボックスを無効にしたいと思います。

さらに情報が必要な場合はお知らせください。お時間をいただきありがとうございます。

乾杯、スティーブ

Answer 1

私はjQueryを初めて使用するので、他の誰かがあなたの問題に対するより良い解決策をすぐに思いつくことを願っていますが、私がすること（うまくいったこと）は、単に.toggle-blockと.blurbを別のdiv.containerブロック内に保持することでした.

したがって、次の html 構造が得られます。

<div class="block">
    <div class="container">
        <a class="toggle-block"><img src="http://www.northareadevonfootball.co.uk/Images/football.jpg"></a>
        <div class="blurb">
            <h2>Title here</h2>
            <p>Hello there, this is a test to take the content over one line so I can see what the line height looks like.</p>
        </div>
    </div>
</div>

そして、これをjqueryコードに変更するだけです:

$('.container').mouseleave(function() {
     $('.blurb').stop().slideUp(500);
});

それは動作します...ただし、改善すべき点がいくつかあります...さらにヘルプが必要な場合はお知らせください。プロジェクトの成功を祈っています!

Answer 2

ボックスをそこに残したい場合は、次の行を削除してください。

    $('.toggle-block').mouseleave(function() {
        $(this).siblings('.blurb').stop().slideUp(500);
    });

マウスがボール上にないときにボックスを非表示にする場合は、次のようにこれらの行を変更します。

    $('.toggle-block').mouseleave(function() {
        $(this).siblings('.blurb').stop().hide();
    });

Answer 3

これはあなたが望むものかもしれません

(function($) {
    $(document).ready(function(){
        var check = true;                   
        $('.toggle-block').mouseenter(function() {
            if(check){
            $(this).siblings('.blurb').slideDown(1000);
                check = false;
            }
        });

        $('.toggle-block').mouseleave(function() {
            $(this).siblings('.blurb').stop().slideUp(500);
        });

    });
})(jQuery);​