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

【问题标题】：how to fade out one div and fade in another div at same time using Jquery如何使用Jquery淡出一个div并同时淡入另一个div
【发布时间】：2013-07-31 19:18:37
【问题描述】：

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

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

然后淡出 newDivforWraping1,#newDivforWraping9
并淡入 #newDivforWraping5and 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 设置了计时器来重复此过程，但是当用户将鼠标悬停在它上面时，我希望它暂停（如果不可能，则停止）。并在鼠标未悬停在其上时恢复。我在这里有my code，你可以在这里看到我当前的部分工作解决方案。感谢您的帮助..

【问题讨论】：

听起来您正在寻找某种旋转木马..？有很多可供选择。

标签： jquery fadein setinterval jquery-hover

【解决方案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/

【讨论】：

太棒了！这个解决方案以我想要的正确方式工作。如果你能解释一下函数 runAnimation 是如何工作的，这对我和其他人的理解会很有帮助。
c,d,h 是要使用的函数“淡入淡出”（In/Out）的名称。问题只是在每个时间间隔循环中旋转激活这些标志 a、b 或 g。您可以将每次淡入淡出提高到 1000 毫秒，然后您也应该将计时器持续时间提高到 3000。如果您对演示满意，请在我的答案上标记。很高兴为您提供帮助。
我已经投票给你并标记了你的答案。你能评论一下$("#newDivforWraping1")[c](0)这意味着什么吗？
我刚刚在我的回答中添加了更多评论。

【解决方案2】：

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

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

【讨论】：