0

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

これは私のコードです。どういうわけか、700msのタイムアウトで要素を1つずつ表示したいです。

現在、すべての要素が一度に表示されます。

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 に答える