1

4箱あります。それらの 1 つにカーソルを合わせると、他の 3 つが非表示になり、ホバーされた 1 つが展開されます。ただし、コールバックが起動されていないため、拡張部分は発生していません!

コード: (フィドルはこちら: 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 に答える