jquery - jQuery脚本问题

Question

我对 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 但同样的事情发生了。我从这个站点尝试了很多解决方案，但都是一样的。
我将不胜感激这方面的任何帮助。

Answer 1

检查这个，但确保你不想使用$('#header')或$('.header')代替$('header')：

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

Answer 2

试试这个。它的工作

$(document).ready(function () {
        $('#header').hide();
            $(".masterhead").mouseover(function () {
                $("#header").slideDown('slow');
            });

        $('.masterhead').mouseout(function () {
            $('#header').slideUp('slow');
        });


});

这是示例html

<div class="masterhead">hello </div>
<div id="header">hi</div>

这是 jsfiddle*演示*

希望这可以帮助。谢谢你。

Answer 3

更新

我修复它，我在这里找到了解决方案。我不知道最佳实践是否按我希望的方式工作。我在调用 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>

Answer 4

使用 slideToggle 更容易：

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

});