使用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 http://www.michaelware.net/OutsideImages/jQueryPositionIssue/Screen2.png
第三次通话后
屏幕截图3 http://www.michaelware.net/OutsideImages/jQueryPositionIssue/Screen3.png
请注意,你必须让fadein/fadeout完成或不会出现问题.
两件事情.第一个.bind()已被弃用赞成.on().其次,您需要将呼叫顺序更改为:
$('#ShowMessageButton').on("click", function () {
$('#message').fadeIn(800).position({
my: "center top",
at: "center bottom-12",
of: "#header"
}).delay(1000).fadeOut(1000);
});
作为位置状态的文档,"注意:jQuery UI不支持定位隐藏元素".由于您尝试在隐藏元素上使用位置,因此需要首先使其可见.如果您没有使用原始代码的格式在此示例中完全淡化元素,则可以见证这一点.