2

我正在关注帖子上的指示： jQuery fadeIn() different interval with multiple div's

但我就是不能让它工作..有什么问题 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>


<script type="text/javascript">
$('.fadeIn').each(function(){
        var $this = $(this);
        $this.before('<div>&nbsp;</div>');
        setTimeout(function(){ 
            $this.prev().remove(); 
            $this.fadeIn(Math.floor(Math.random()*1500)); 
        }, Math.floor(Math.random()*1500));
    }
);​

</script>       

<style>

.fadeIn{
   display: none; 
}​
​
</style>

</head>



<body>

<div class="fadeIn">Test 1</div>
<div class="fadeIn">Test 2</div>
<div class="fadeIn">Test 3</div>
<div class="fadeIn">Test 4</div>
<div class="fadeIn">Test 5</div>
<div class="fadeIn">Test 6</div>​
</body>
</html>
4

4 回答 4

2

实际演示

您必须导入 jQuery 库！
在你之前添加它<script>：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

它应该看起来像：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>    
<script type="text/javascript">

(function($){ // remap the '$' character to jQuery

$('.fadeIn').each(function(){
        var $this = $(this);
        $this.before('<div>&nbsp;</div>');
        setTimeout(function(){ 
            $this.prev().remove(); 
            $this.fadeIn(Math.floor(Math.random()*1500)); 
        }, Math.floor(Math.random()*1500));
)};

})(jQuery);


</script>

或使用$(document).ready(function(){ /*your code here*/ });!

于 2012-05-22T10:01:53.320 回答
1

1）您需要包含jquery库

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

2）您需要将代码包装在一个 $(function()或jQuery(function($)

jQuery(function($) {
    $('.fadeIn').each(function(){
            var $this = $(this);
            $this.before('<div>&nbsp;</div>');
            setTimeout(function(){ 
                $this.prev().remove(); 
                $this.fadeIn(Math.floor(Math.random()*1500)); 
            }, Math.floor(Math.random()*1500));
        }
    );​
});
于 2012-05-22T10:03:13.030 回答
0

您需要更新您的代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $('.fadeIn').each(function () {
        var $this = $(this);
        $this.before('<div>&nbsp;</div>');
        setTimeout(function () {
            $this.prev().remove();
            $this.fadeIn(Math.floor(Math.random() * 1500));
        }, Math.floor(Math.random() * 1500));
    });​
})
</script>

这

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

将 jQuery 库添加到您的页面 - 这使您能够使用 jQuery 函数。你需要将你的代码包装在

$(function() {

});

阻塞，以便在 DOM 准备好之前它不会执行。请参阅此处的文档

于 2012-05-22T10:03:39.780 回答
0

首先，这是您的代码工作的小提琴。

您没有做的只是在 head 元素中导入 jquery 库。

于 2012-05-22T10:06:11.667 回答