0

私はjQueryにかなり慣れていません。
上にスライドして下にスライドする簡単なスクリプトを作成しようとしています。

<script type="text/javascript">
$(document).ready(function () {
    if ($('header').is(':visible')) {
        $('header').hide(function () {
            $(".masterhead").mouseover(function () {
                $("header").slideDown('slow');
            });
        });
    } else {
        $('.masterhead').mouseout(function () {
            $('header').slideUp('slow');
        });
    }

});
</script>

問題は、ブラウザーで表示しようとすると、期待していた正しい動作ではなく、上下にスライドし続けることです。SlideToggle を試してみましたが、同じことが起こります。このサイトの解決策をたくさん試しましたが、同じでした。
これについて何か助けていただければ幸いです。

4

4 に答える 4

0

これをチェックしますが、代わりに$('#header')orを使用したくないことを確認してください:$('.header')$('header')

   $(document).ready(function() {
        $('header').hide();
        $(".masterhead").hover(
        function() {
            $("header").slideDown('slow');
        },
        function() {
            $("header").slideUp('slow');
        });
    });
于 2013-08-11T18:16:01.317 に答える
0

slideToggle を使用してより簡単に:

 $(document).ready(function() {
                $('header').hide();
                $('.masterhead').hover(function(){
                      $('header').slideToggle('slow');
                });

});
于 2013-08-11T19:27:01.653 に答える
0

アップデート

私はそれを修正します、私はここで解決策を見つけました。ベストプラクティスかどうかはわかりませんが、期待どおりに機能しているようです。slideDown または slideup 関数を呼び出す前に .stop(true, true) を追加します。

解決

 <script type="text/javascript">

            $(document).ready(function() {
                $('header').hide();
                $(".masterhead").hover(
                function() {
                    $("header").stop(true,true).slideDown('slow');
                },
                function() {
                    $("header").stop(true,true).slideUp('slow');
                });
            });

        </script>
于 2013-08-11T19:14:26.347 に答える