Question

我有三个div，
newDivforWraping1,#newDivforWraping5,#newDivforWraping9。

我想淡出newDivforWraping1 div并淡出#newDivforWraping5,#newDivforWraping9

然后淡出 newDivforWraping1,#newDivforWraping9
和fadein＃newDivforWraping5 and finally fadeIn #newDivforWraping9`

和fadeOut #newDivforWraping1,#newDivforWraping9。

在屏幕上的任何一点，我只看到了div。

即

<div1>--fade In
<div2>--fade Out
<div3>--fade Out

<div2>--fade In
<div3>--fade Out
<div1>--fade Out

<div3>--fade In
<div1>-fade Out
<div2> -- fade Out

请注意，无论div出现在屏幕上，它都在屏幕上的相同位置。我使用setInterval设置了计时器以重复此过程，但是当用户将鼠标悬停在它上面时，我希望它暂停（如果不可能，则停止）。当鼠标没有悬停在它上面时恢复。我在这里有my code，你可以在这里看到我目前的部分工作解决方案。谢谢你帮忙..

Answer 1

试试吧

(function () {
var i = 1;
var timer=setInterval(function () {
    if(i>3) {i=1};
    runAnimation(i, i, i);
    i++;
},1000); //increase it to 3000 if each fade in runAnimation is up to 1000 on function runAnimation


function runAnimation(a,b,g){
    c = a == 1? 'fadeIn' : 'fadeOut';
    d = b == 2? 'fadeIn' : 'fadeOut';
    h = g == 3? 'fadeIn' : 'fadeOut';

    $("#newDivforWraping1")[c](0); //if a ==1 then $("#newDivforWraping1").fadeIn(0) else $("#newDivforWraping1").fadeOut(0)
    $("#newDivforWraping5")[d](0);
    $("#newDivforWraping9")[h](0);
}

$("#newDivforWraping1,#newDivforWraping5,#newDivforWraping9").hover(function() {
    clearInterval(timer);
}, function(){
    timer=setInterval(function () {
    if(i>3) {i=1};
    runAnimation(i, i, i);
    i++;
},1000);
});    

})();

演示

http://jsfiddle.net/RQNrt/32/

Answer 2

如果您想同时执行这两项操作，请不要使用fadeIn / fadeOut回调进行第二次调用。因为HJavascript直接运行nex淡化FX。

$("#newDivforWraping1").fadeIn(1000);
$("#newDivforWraping5").fadeOut(1000);

如何淡出一个div并使用Jquery同时淡入另一个div

2 个答案: