jquery and easing effect loop and pause

StackOverflow https://stackoverflow.com/questions/14939830

Question

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

this is my code, I want somehow to elements show one by one with timeout of 700ms.

Currently all elements are shows at once.

I tryied with setInterval and setTimeout functions bu without succes.

Can anyone help me or point me to some tutorial how I can do this?

Code:

<!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>
Was it helpful?

Solution

Use jquery's 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);
        });
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top