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 * Demo *

希望这会有所帮助。谢谢。

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');
                });

});

Jquery脚本问题

4 个答案: