Javascript 在jquery中的两个div之间添加延迟_Javascript_Jquery_Html_Css_Delay

Javascript 在jquery中的两个div之间添加延迟

javascript jquery html css

Javascript 在jquery中的两个div之间添加延迟,javascript,jquery,html,css,delay,Javascript,Jquery,Html,Css,Delay,我有两个Div class=sliced，每个Div class=tile中有三个图像。当我使用jquery制作动画时，我无法在切片类之间添加延迟。然而，我增加了瓷砖之间的延迟 index.html <!DOCTYPE html> <html> <head> <title>Testing Scripts</title> <link rel="style

我有两个Div class=sliced，每个Div class=tile中有三个图像。当我使用jquery制作动画时，我无法在切片类之间添加延迟。然而，我增加了瓷砖之间的延迟

index.html

<!DOCTYPE html> 
     <html>
        <head>
            <title>Testing Scripts</title>
            <link rel="stylesheet" type="text/css" href="style.css">
        </head>
        <body>




        <div id="slider-wrap">
            <div class="sliced">

                    <div class="tile"><img src="http://imageshack.us/a/img545/9813/58zj.jpg" alt"1"></div>
                    <div class="tile tile1"><img src="http://imageshack.us/a/img818/5776/8ik6.jpg" alt"1"></div>
                    <div class="tile tile2"><img src="http://imageshack.us/a/img18/6017/rue6.jpg" alt"1"></div>
            </div>  
            <div class="sliced " >

                    <div class="tile"><img src="http://imageshack.us/a/img163/6131/ld3f.jpg" alt"1"></div>
                    <div class="tile tile1"><img src="http://imageshack.us/a/img838/4102/h0nv.jpg" alt"1"></div>
                    <div class="tile tile2"><img src="http://imageshack.us/a/img833/6500/dp5e.jpg" alt"1"></div>
            </div>  
         </div>   


         </div>
        <script src="jQuery.js"></script>
        <script src="jquery.easing.1.3.js"></script>
        <script src="script.js"></script>
        <script>$('.sliced').slider();</script><!--Calling plugin with   -->
        </body> 
     </html>

JScript:-

function Slider(ele){
    var $ele = $(ele), //Jquery Object of .sliced class
        $tiles = $ele.find('.tile');  //$tiles contains all .tile class as jquery Object
        $.each($tiles,function(index,value){ 
               setTimeout(function(){
                $(value).fadeOut(1000);
                },1000*index);

        });

} 

$.fn.slider = function(){   
       //This stores all .sliced class as Jquery object                                      
    return this.each(function(){  //Iterarting over each class provided 
        var slider = new Slider(this);  //Slider is constructor function
        //console.log(slider);
    });
}

也许是这样的

$( "div" ).click(function() {
  $( this ).addClass( "big-blue", 1000, "easeOutBounce" );
});

能帮忙吗？

经过这么多的尝试，我终于自己找到了答案

JS:-

我不确定你想做什么。这就是你要找的：？我想增加第三张和第四张图像褪色之间的延迟。

$( "div" ).click(function() {
  $( this ).addClass( "big-blue", 1000, "easeOutBounce" );
});

function Slider(ele,index){
    var $ele = $(ele), //Jquery Object of .sliced class
        $tiles = $ele.find('.tile'),//$tiles contains all .tile class as jquery Object
        delay = 5000;  //Delay between two divs
        setTimeout(function(){
             $.each($tiles,function(index,value){ 
               setTimeout(function(){
                $(value).fadeOut(1000);
                },1000*index);
          });
        },delay*index);


} 

$.fn.slider = function(){   
       //This stores all .sliced class as Jquery object                                      
    return this.each(function(index){  //Iterarting over each class provided 
        var slider = new Slider(this,index);  //Slider is constructor function
        //console.log(slider);
    });
}