Question

我正在关注帖子上的指示： jQuery fadeIn() different intervals 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>

Answer 1

demo in action

你必须导入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*/ });！

Answer 2

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));
        }
    );
});

Answer 3

您需要更新代码：

<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准备就绪之前不执行.. See the docs here

Answer 4

首先here是你的代码工作的小提琴。

你所做的只是导入head元素中的jquery库。

jQuery fadeIn（）间隔多个div

4 个答案: