悬停在一段文字上时,我试图使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...
})

09-25 20:23