Question

目前我使用的编辑器是Adobe Dreamweaver。在我的编辑器中如下在试用期间，语句可以正常工作，但是在我的浏览器中，如Safari，Mozilla和Chrome，我的淡入和淡出根本不起作用。我希望他们不断淡出然后淡入，但图像仍然可见。有没有煽动为什么会发生这种情况？

$(document).ready(function(){
    var x=0;
    while(x==0 ){
        $("#Imag1").fadeOut(3000);
    $("#Imag2").fadeOut(8000);
        $("#Imag3").fadeOut(6000); 
        x++;

    if(x==1){
        $("#Imag1").fadeIn(2000);
            $("#Imag2").fadeIn(5000);
            $("#Imag3").fadeIn(9000);
        x--;
        } 
    }
});

Answer 1

这是我的小提琴http://jsfiddle.net/m7HcT/1/ 它创建了一种可重用的方法，可以调用要闪存的任何元素。

HTML：

<div class='block' id='Imag1'></div>
<div class='block' id='Imag2'></div>
<div class='block' id='Imag3'></div>

jQuery的：

fadeloop('#Imag1',1500,1200,true);
fadeloop('#Imag2',100,200,true);
fadeloop('#Imag3',3000,7000,true);

//The element is cached inside the function so we don't make 
//Multiple DOM calls on elements we have already found.
//Each Interval is completely independant

function fadeloop(el,timeout,timein,loop){
    var $el = $(el),intId,fn = function(){
         $el.fadeOut(timeout).fadeIn(timein);
    };
    fn();
    if(loop){
        intId = setInterval(fn,timeout+timein+100);
        return intId;
    }
    return false;
}

Answer 2

只需删除while循环即可完美运行

$(document).ready(function () {
    $("#Imag1").fadeOut(3000);
    $("#Imag2").fadeOut(8000);
    $("#Imag3").fadeOut(6000);
    $("#Imag1").fadeIn(2000);
    $("#Imag2").fadeIn(5000);
    $("#Imag3").fadeIn(9000);
});

Working jsFiddle

编辑

既然你想要它无穷无尽，你可以将效果放到另一个函数中并在回调上运行它。 Updated fiddle here

$(document).ready(function () {
    fadeThem();
});
function fadeThem() {
    $("#Imag1").fadeOut(3000, function() {
        $(this).fadeIn(2000, fadeThem());
    // Apply the callback to the one with the shortest combined animation time
    });
    $("#Imag2").fadeOut(8000, function() {
        $(this).fadeIn(5000);
    });
    $("#Imag3").fadeOut(6000, function() {
        $(this).fadeIn(9000);
    });
}

Answer 3

我已经解决了这个问题。所有这些链接元素都缺少其小于符号（＆gt;）。 4小时后很沮丧，我发现了我的错误。

JQuery逐渐淡出淡出

3 个答案: