0

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

我想淡入newDivforWraping1div 并淡出#newDivforWraping5,#newDivforWraping9

然后淡出 newDivforWraping1,#newDivforWraping9
并淡入#newDivforWraping5 and finally fadeIn#newDivforWraping9`

和淡出#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了用于重复此过程的计时器，但是当用户将鼠标悬停在它上面时，我希望它暂停（如果不可能，则停止）。并在鼠标未悬停在其上时恢复。我在这里有我的代码，你可以在这里看到我当前的部分工作解决方案。谢谢帮忙。。

4

2 回答 2

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/

于 2013-07-31T19:58:49.357 回答
0

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

$("#newDivforWraping1").fadeIn(1000);
$("#newDivforWraping5").fadeOut(1000);
于 2013-07-31T19:23:26.913 回答