0

http://jsfiddle.net/6jxQs/18/

这是我的代码，我想以某种方式将元素一一显示，超时为 700 毫秒。

目前所有元素都同时显示。

我尝试使用 setInterval 和 setTimeout 函数但没有成功。

任何人都可以帮助我或向我指出一些教程如何做到这一点？

代码：

<!DOCTYPE html>
<html> 
<head> 
<title>.::Efekat::.</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/stil.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
    $('.mydiv').css('opacity','0');
    $("#demo").click(function(){
        $("div").each(function(index){
            var self = $(this);
            self.not(':animated').css(
                {'opacity': 0.8}
                ).effect(
                    "scale", 
                    {
                        origin:['middle','center'], 
                        from:{width:self.width()+20,height:self.height()+20}, 
                        percent: 100, 
                        direction: 'both', 
                        easing: "linear" 
                    }, 
                    700, 
                    function(){
                        $(this).animate({"opacity": 1}) 
                    });

        });
    });
});
</script>

</head>
<body>
<span id="demo">klikni!</span>
<div class="mydiv">Element 1</div>
<div class="mydiv">Element 2</div>
<div class="mydiv">Element 3</div>
<div class="mydiv">Element 4</div>
<div class="mydiv">Element 5</div>
</body>
</html>
4

1 回答 1

2

使用 jquery 的delay()

$("div").each(function(index){
            var self = $(this);
            self.not(':animated').css(
                {'opacity': 0.8}
                ).delay(700 * index)
                 .effect(
                    "scale", 
                    {
                        origin:['middle','center'], 
                        from:{width:self.width()+20,height:self.height()+20}, 
                        percent: 100, 
                        direction: 'both', 
                        easing: "linear" 
                    }, 
                    700, 
                    function(){
                        $(this).animate({"opacity": 1}) 
                    });

            }, 100);
        });
于 2013-02-18T15:41:54.357 回答