Question

我试图在一段文字徘徊时使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用户。

Answer 1

这应该是订单。

<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>
<script src="fall.js"></script>

Answer 2

尝试将代码包装在内 -

$(document).ready(function() {

 //code here

});

在将元素加载到DOM之前，你的javascript可能没有被执行到同样的运行问题

+

如果你指定的javascript在fall.js中，因为它使用jquery在jquery之后加载fall.js文件。

Answer 3

您需要采取两个步骤 -

1） ORDERING - 使用jquery lib的js文件/代码。函数应始终包含jquery文件

<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>
<script src="fall.js"></script>

2）元素应该在DOM中可用 - js / script应该是正文中的最后一个或使用jquery dom ready事件（More Detail Here）

Answer 4

您在哪里提供代码？我有类似的问题。

<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代码。标签底部应该工作

还将您的代码放入就绪函数

$(document).ready(function(){
    your code here...
})

Answer 5

我可以在这里发现一些Javascript与CSS的混淆。

$('#holder p').on( 'mouseover', function() {
    // code
});

Answer 6

您可以使用：

$(function(){
   //you code here
})

jQuery不起作用

6 个答案: