Javascript jquery和缓解效果循环和暂停_Javascript_Jquery_Jquery Easing

Javascript jquery和缓解效果循环和暂停

javascript jquery

Javascript jquery和缓解效果循环和暂停,javascript,jquery,jquery-easing,Javascript,Jquery,Jquery Easing,这是我的代码，我想用700毫秒的超时时间逐个显示元素目前，所有元素都会同时显示我尝试了setInterval和setTimeout函数，但没有成功有人能帮我吗，或者给我指一些教程，告诉我怎么做代码： .：：Efekat:：。 $（文档）.ready（函数（）{ $（'.mydiv'）.css（'opacity'，'0'）； $（“#演示”）。单击（函数（）{ $（“div”）。每个函数（索引）{ var self=$（这是）； self.not（':animated'）.css( {'

这是我的代码，我想用700毫秒的超时时间逐个显示元素

目前，所有元素都会同时显示

我尝试了setInterval和setTimeout函数，但没有成功

有人能帮我吗，或者给我指一些教程，告诉我怎么做

代码：


.：：Efekat:：。
$（文档）.ready（函数（）{
$（'.mydiv'）.css（'opacity'，'0'）；
$（“#演示”）。单击（函数（）{
$（“div”）。每个函数（索引）{
var self=$（这是）；
self.not（':animated'）.css(
{'opacity'：0.8}
).效果(
“规模”，
{
原点：[“中间”、“中间”]，
from:{width:self.width（）+20，height:self.height（）+20}，
百分之一百，
方向：'两个'，
放松：“线性”
}, 
700, 
函数（）{
$（this.animate（{“不透明”：1}）
});
});
});
});
克利尼！
要素1
要素2
要素3
要素4
要素5

使用jquery的

对我来说（Chrome）没有显示任何元素。在chorme、ff甚至IEE上对我有效你看到元素1、元素2的过渡了吗？对我来说，他们一直隐藏着。是的，我看到了每一个元素。。。我不明白你怎么看不见，哪里是错误，是JSFIDLE设置。它应该在头部加载，代码中没有问题。

<!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>

$("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);
        });