jquery - jQueryアニメーションdivと選択オプション

Question

jQueryで「スライダー」を作成した経験がありますが、初めてこの問題が発生しました。div に選択フィールドを挿入しました。それを変更しようとすると、div がスライドアウトした後、スライドして戻ります。

ここにコードを投稿しました。

Answer 1

こんにちは、このコードはあなたの仕事をするはずです..!! 、

ワーキングデモ@ http://jsfiddle.net/fpjDg/13/

jQuery(document).ready(function() {
    jQuery(".slider").hover(function(e) {

        jQuery(this).animate({
            left: "0"
        }, 700)
    }, function() {

        //  e.preventDefault();
        //slide out when options are selected.
        $("select").change(function() {

            //Call this  line only when the work is completed in the  form.
            jQuery(".slider").stop(true, false).animate({
                left: "-270px"
            }, 700);

        }); //change
    }); //hover
}); //ready 

Answer 2

これは予想される動作のようですが、いくつかのオプションがあります。

1) jQuery プラグインを使用して、select 要素を div/ul/li 要素を使用するドロップダウンに置き換えます。これらの要素はボックスの一部として認識されるため、これによって mouseleave イベントがトリガーされることはありません。(何らかの理由で、これは選択ボックスのオプションでは発生しません)

2）これはおそらくもっとハックですが、マウス座標がボックス内にあるかどうか、そうでない場合は mouseleave で確認できdon't hide the boxますhide the box。

3) mouseleave で非表示にする代わりに、閉じるボタンを使用するか、ドキュメントなどでクリック ハンドラーを使用します。

Answer 3

jQuery(document).ready(function() {
    jQuery(".slider").hover(function() {
        jQuery(this).animate({
            left: "0"
        }, 700)
    }, function(e) {
        var within = $(e.target).parents().is('.slider')
        if (!within) {
            jQuery(".slider").stop(true, false).animate({
                left: "-270px"
            }, 700);
        }
    });
});

作業サンプル