與jQuery隨機淡入div

任何幫助在這裏非常感謝。我想用jQuery來解決以下問題...與jQuery隨機淡入div

有兩個div。我想隨機淡入其中一個div（綠色或紅色），等待幾秒鐘，然後消失。然後隨機淡入另一個。我試過使用math.random();，但我似乎無法正常工作。

所以基本上它選擇紅色或綠色的div ..幾秒鐘後消失，隨機選擇紅色或綠色的div ......然後在幾秒鐘後消失。它只是不斷重複。

HTML：

<div id="one">This is the first block</div> 
<div id="two">This is the second block</div>

CSS：

#one { 
    background: red; 
    width:300px; 
    height:100px; 
} 
#two { 
    background: green; 
    width:300px; 
    height:100px; 
}

來源

2014-01-29 paulby

如果你只有2 div的，你想淡入，淡出，然後在另一個褪色每一次，它永遠不會真的是隨機的嗎？或者可以連續兩次選擇相同的元素？ – Yani

哇！快速反應，每個人都在工作。不幸的是Stack Overflow說我需要Upvote的更多聲望......但否則我會Upvote all。 :) – paulby

請標記爲已解決，並選擇正確的答案... – Yani

賦予這兩個divs類名稱，如.fade爲更易於管理。

然後，你可以這樣做：

(function randomFade() { 
    var fadeDivs = $('.fade'), 
     el = fadeDivs.eq(Math.floor(Math.random() * fadeDivs.length));   
    el.fadeIn('1000').delay(2000).fadeOut('1000',randomFade); 
})();

Fiddle Demo

來源

2014-01-29 01:49:30 Felix

你可以這樣做：

function fadeRandomly() { 
    // fade both out at first 
    $('#one').fadeOut(/* duration */); 
    $('#two').fadeOut(/* duration */); 
    if (Math.random() > 0.5) { 
     $('#one').fadeIn(/* duration */); 
    } else { 
     $('#two').fadeIn(/* duration */); 
    } 
} 

setInterval(fadeRandomly, /* duration between animations */);

來源

2014-01-29 01:37:58 Erik

這應該工作：

var rnd = Math.floor(Math.random() * 2) + 1;//outputs either 1 or 2 

if (rnd == 1) { 
    $('#one').fadeIn(500).delay(500).fadeOut(500); 
} else { 
    $('#two').fadeIn(500).delay(500).fadeOut(500); 
}

希望這有助於！

來源

2014-01-29 01:41:25 Yani

類似於：我添加了一個函數，以防萬一您有更多的div來處理您，並且您想要擴展淡入淡出的範圍。

var a = ['one', 'two']; // the name of your divs 
function fadeRandomDiv(min, max) { 
    var divtofade = a[Math.floor(Math.random() * (max - min + 1) + min)]; 
    // delay 4 seconds, then fade out 
    jQuery("#" + divtofade).fadeIn("slow").delay(4000).fadeOut("slow"); 
} 

fadeRandomDiv(1, a.length - 1)

如果你想重複地調用它。

// every 3 seconds call the function 
    setInterval(function(){ 
     fadeRandomDiv(1, a.length - 1); 
    }, 3000);

來源

2014-01-29 01:42:17

與jQuery隨機淡入div

回答

相關問題