Question

我有4个盒子。当它们悬停在其中一个上时，其他3个被隐藏，并且其中一个被扩展。然而，扩展部分没有发生，因为我的回调没有被解雇！

代码：（小提琴：http://jsfiddle.net/CpKLk/5/）

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        <script type="text/javascript">
            $(document).ready(function ()
            {
                $("div#Content div").hover(function ()
                {
                    var toShow = $(this);

                    toShow.siblings().hide("swing", null, "slow", function ()
                    {
                        //Never gets here!
                        toShow.addClass("Expanded");
                        alert("Changing class!");
                    });
                }, function ()
                {
                    var toShow = $(this);

                    toShow.siblings().show("swing", null, "slow", function ()
                    {
                        //Never gets here!
                        toShow.removeClass("Expanded");
                        alert("Changing class!");
                    });
                });
            });
        </script>
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
        <style type="text/css">
            div#Content
            {
                white-space: nowrap;
            }

            div#Content div
            {
                width: 100px;
                height: 100px;
                display: inline-block;
            }

            div#Content div#Box1
            {
                background-color: red;
            }

            div#Content div#Box2
            {
                background-color: blue;
            }

            div#Content div#Box3
            {
                background-color: green;
            }

            div#Content div#Box4
            {
                background-color: pink;
            }

            div#Content div.Expanded
            {
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="Content">
            <div id="Box1"></div>
            <div id="Box2"></div>
            <div id="Box3"></div>
            <div id="Box4"></div>
        </div>
    </body>
</html>

Answer 1

.hide()所采用的参数必须按以下顺序排列：持续时间，缓和，回调（http://api.jquery.com/hide/）

以下是您的示例的更新jsFiddle：http://jsfiddle.net/CpKLk/7/

.hide()调用是这样完成的：

hide("slow","swing", function (){ ... });

必须以同样的方式调用

.show()。

Answer 2

我玩了一下你的剧本，想出了类似的东西：

$("div#Content div").hover(function () {
  var toShow = $(this);                      
  toShow.siblings().hide("slow").delay(10);
  toShow.addClass("Expanded");
}, function () {
  var toShow = $(this);
  toShow.siblings().show("slow").delay(10);
  toShow.removeClass("Expanded");
});

添加了延迟功能，因此鼠标输出时不会发疯。

jQuery显示/隐藏不触发回调

2 个答案: