5

jQuery UI を使用して div を配置すると、奇妙な問題が発生します。関数を初めて呼び出すと、div が予期される場所に配置されます。後続の呼び出しでは、div がウィンドウの右と下にどんどん配置されます。以下は、問題を再現できる最小限のコードです。 

<!DOCTYPE html>
<html>
<head>
    <title>jQuery UI Position Test </title>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <style type="text/css">
        #header {
            height: 100px;
            background: orange;
        }

        #content {
            height: 300px;
            background: blue;
        }

        #message {
            width: 300px;
            background: yellow;
            position: absolute;
            display: none;
        }
    </style>
</head>

<body>
    <div id="header"></div>
    <div id="message">a message to the user</div>
    <div id="content">
        <input id="ShowMessageButton" type="button" value="Show Message" />
    </div>

    <script>
        $(document).ready(function () {
            $('#ShowMessageButton').bind("click", function () {
                $('#message').position({ my: "center top", at: "center bottom-12", of: "#header" });
                $('#message').fadeIn(800).delay(1000).fadeOut(1000);
            });
        });
    </script>
</body>
</html>

これを初めて取得したときにコードを実行すると、これは私が予想したことです。

スクリーンショット 1 http://www.michaelware.net/OutsideImages/jQueryPositionIssue/Screen1.png

2回目の電話の後

スクリーンショット 2 http://www.michaelware.net/OutsideImages/jQueryPositionIssue/Screen2.png

3回目の電話の後

スクリーンショット 3 http://www.michaelware.net/OutsideImages/jQueryPositionIssue/Screen3.png

フェードイン/フェードアウトを終了させないと問題が発生しないことに注意してください。

4

2 に答える 2

6

2つのこと。First.bind()は推奨されなくなりました.on()。次に、呼び出しの順序を次のように変更する必要があります。

$('#ShowMessageButton').on("click", function () {
    $('#message').fadeIn(800).position({
        my: "center top",
        at: "center bottom-12",
        of: "#header"
    }).delay(1000).fadeOut(1000);
});

jsFiddle の例

位置状態のドキュメントとして、「注: jQuery UI は隠し要素の配置をサポートしていません」。非表示の要素で位置を使用しようとしているため、最初にそれを表示する必要があります。元のコードの形式を使用して、この例で要素を完全にフェードアウトしない場合、これを確認できます。

于 2013-04-18T19:44:30.560 に答える