Question

我想在鼠标悬停图片上附加“图片幻灯片”。它有效，但我想在开始幻灯片放映时设置延迟。当我按队列设置延迟时，它会停止工作......为什么？如何解决？

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

好的，我在代码中找到了解决方案和错误......

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

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

1 个答案: