如何在追加幻灯片之前设置延迟？

Question

我想在鼠标悬停图像上添加“图像幻灯片”。它的工作原理，但我想在幻灯片开始时设置延迟。当我按队列设置延迟时，它停止工作......为什么？如何解决它？

Working jsFidlle example without delay

Wrong jsFiddle example with delay and queue

HTML

<ul> 
    <li> 
     <a href="http://cargocollective.com/jaimemartinez/" data-galeria="http://cssglobe.com/lab/tooltip/02/1.jpg,http://cssglobe.com/lab/tooltip/02/2.jpg,http://cssglobe.com/lab/tooltip/02/3.jpg,http://cssglobe.com/lab/tooltip/02/4.jpg" class="preview"> 
      <img src="http://cssglobe.com/lab/tooltip/02/1.jpg" alt="gallery thumbnail"/> 
     </a> 
    </li> 
</ul> 

jQuery的

this.imagePreview = function(){ 
     xOffset = 10; 
     yOffset = 30; 
     var i = 0; 
     var interval = null; 

    $("a.preview").hover(function(e){ 
     data_galeria = $(this).data('galeria'); 
     images = []; 
     images = data_galeria.split(","); 
     var hreff = images[0]; 

     $("body").append("<p id='preview'><img id='preview_img' src='"+ hreff +"' alt='Image preview' /></p>"); 


     intervalID = setInterval(function() { 
       i = (i < 2) ? i + 1 : 0; 
       var image_src = images[i]; 
       $('#preview_img').fadeOut("fast", function(){ 
        $('#preview_img').attr("src", image_src).hide(); 
        $('#preview_img').fadeIn("slow"); 
       }); 
     }, 1800); 
     $("#preview") 
      .css("top",(e.pageY - xOffset) + "px") 
      .css("left",(e.pageX + yOffset) + "px") 
      .fadeIn();       
    }, 
    function(){ 
     clearInterval(intervalID); 
     $("#preview").remove(); 
    }); 
    $("a.preview").mousemove(function(e){ 
     $("#preview") 
      .css("top",(e.pageY - xOffset) + "px") 
      .css("left",(e.pageX + yOffset) + "px"); 
    });   
}; 

$(function() { 
       imagePreview(); 
}); 

CSS

#preview{ 
    position:absolute; 
    border:1px solid #ccc; 
    background:#333; 
    padding:5px; 
    display:none; 
    color:#fff; 
} 

Answer 1

OK，我找到解决方案，错在我的代码...

jsFiddle working example

jQuery的

this.imagePreview = function(){ 
     xOffset = 10; 
     yOffset = 30; 
     var i = 0; 
     var interval = null; 

    $("a.preview").hover(function(e){ 
     data_galeria = $(this).data('galeria'); 
     images = []; 
     images = data_galeria.split(","); 
     var hreff = images[0]; 

     $("body").append("<p id='preview'><img id='preview_img' src='"+ hreff +"' alt='Image preview' /></p>"); 


     intervalID = setInterval(function() { 
       i = (i < 2) ? i + 1 : 0; 
       var image_src = images[i]; 
       $('#preview_img').fadeOut("fast", function(){ 
        $('#preview_img').attr("src", image_src).hide(); 
        $('#preview_img').fadeIn("slow"); 
       }); 
     }, 1800); 
     $("#preview") 
      .css("top",(e.pageY - xOffset) + "px") 
      .css("left",(e.pageX + yOffset) + "px") 
      .hide().delay(700).fadeIn();       
    }, 
    function(){ 
     clearInterval(intervalID); 
     $("#preview").remove(); 
    }); 
    $("a.preview").mousemove(function(e){ 
     $("#preview") 
      .css("top",(e.pageY - xOffset) + "px") 
      .css("left",(e.pageX + yOffset) + "px"); 
    });   
}; 
$(function() { 
       imagePreview(); 
});