悬停在一段文字上时,我试图使DIV下降。 This是原始效果,它是:
var $dropDiv = $('#dropDiv');
$('#holder p').on('hover', function () {
// Get position of clicked div
var offset = $(this).offset();
// Get dimensions of said div
var h = $(this).outerHeight();
var w = $(this).outerWidth();
// Get dimensions of dropping div
var dh = $dropDiv.outerHeight();
var dw = $dropDiv.outerWidth();
// Determine middle position
var initLeft = offset.left + ((w / 2) - (dw / 2));
// Animate drop
$dropDiv.css({
left: initLeft,
top: $(window).scrollTop() - dh,
opacity: 0,
display: 'block'
}).animate({
left: initLeft,
top: offset.top - dh,
opacity: 1
}, 800, 'easeOutBounce');
});
是我的代码。刚开始我以为这是我的库的问题,所以我切换到小提琴的版本。
<script src="fall.js"></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
小提琴也有一些CSS,所以我匹配了它
#holder {
position: absolute;
top: 200px;
left: 100px;
}
#dropDiv {
display: none;
position: absolute;
top: -20px;
background: #ccc;
}
我什至检查了错误控制台,没有任何错误,但仍然无法正常工作。我在做什么错,我该如何解决?我正在使用Safari 5.1.10版,并希望它至少对我和Chrome用户有效。
最佳答案
您在哪里包含代码?我有类似的问题。
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</head>
<body>
YOUR HTML CODE
<script type="text/javascript"> your code</script>
or
<script src="fall.js"></script>
</body>
</html>
在html代码之后包含您的jQuery代码。标签底部
那应该工作
也将代码放入ready函数中
$(document).ready(function(){
your code here...
})