1

我有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>
4

2 回答 2

4

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

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

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

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

.show()必须以相同的方式调用。

于 2012-12-14T13:46:10.580 回答
0

我玩了一下你的脚本，想出了这样的东西： 

$("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");
});​

添加了延迟的东西，所以它不会因为鼠标和东西而发疯。

于 2012-12-14T13:53:36.400 回答