このコードは Chrome では完全に動作しますが、Firefox では関数tile1
が定義されていないとのことです。何が問題なのですか?
また、この関数を短縮する方法はありますか? 内部で for ループtile1
とif-else
ステートメントを使用しようとしましたが、成功しませんでした。
$('div.tile').each(function(index, element) {
for(var i=0;i<=index;i++){
var tile1=function(){
var one ="div.tile div.one";
var two =" div.tile div.two";
var three = "div.tile div.three";
if(index==0){
one="div.tile div.one";
two="div.tile div.two";
three="div.tile div.three";
} else {
one ="div.tile div.one"+index;
two ="div.tile div.two"+index;
three ="div.tile div.three"+index;
}
var $one=$(one);
var $two = $(two);
var $three=$(three);
var oneTop = $one.top;
var twoTop = $two.top;
var threeTop = $three.top;
delayRate += 3000; // delayRate 5 sec (5000) by default
$one
.delay(delayRate)
.animate({top: "-100.5%"},300,easing);
$two
.delay(delayRate)
.animate({top:"0%"},300,easing);
$three
.delay(delayRate)
.animate({top:"100.5%"},300,easing);
$one
.delay(12000)
.animate({top: "-200.5%"},300,easing);
$two
.delay(12000)
.animate({top:"-100.5%"},300,easing);
$three
.delay(12000)
.animate({top:"0"},300,easing);
$one
.delay(12000)
.animate({top: "-100.5%"},300,easing);
$two
.delay(12000)
.animate({top:"0"},300,easing);
$three
.delay(12000)
.animate({top:"100.5%"},300,easing);
$one
.delay(15000-delayRate)
.animate({top: "0"},300,easing);
$two
.delay(15000-delayRate)
.animate({top:"100.5%"},300,easing);
$three
.delay(15000-delayRate)
.animate({top:"200.5%"},300,easing);
if(i==3){
delayRate=0;
}
}
}
window.setInterval(tile1, 3000);
});
関数を呼び出すと、index
0、3、1、2 のようにランダムに来て、インデックスが対応する 4 つの div があります。