javascript - JQuery fading in fading out continuously

Question

Currently the editor that I am using is Adobe Dreamweaver. In my editor the following statements work during trial, however in my browsers such as Safari, Mozilla, and Chrome my fade in and fade out is not working at all. I'd like for them to constantly fade out then fade back in, but the images still remain visible. Any incites as to why this is happening to me?

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

工作的jsFiddle

编辑

由于您希望它无穷无尽，您可以将效果放入另一个函数并在回调上运行它。在这里更新小提琴

$(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

我已经解决了这个问题。一直以来，链接元素都缺少小于号（>）。4小时后非常沮丧，我发现了我的错误。