自己呼び出し関数呼び出し

Question

自己呼び出し関数呼び出しは繰り返されますが、関数コードは関数出力の繰り返しに問題があります。

Javascriptを

//version 2 
! function anf1(){ 
if(w0 = '0') { //always true will be executed 
    $('.fish1').stop().animate({'margin-left': w50, 'margin-top': '30px' }, 25000); //move object to the center of screen 
    console.log('start'); 
} 
if(w50 = w50) { //always true will be executed after 1st if condition 
    $('.fish1').stop().animate({'margin-left': w70, 'margin-top': '-30px'}, 9000); //move object to 70% of browser width 
    console.log('middle') 
} 
if(w70 = w70) { //always true will be executed after the 2nd if condition 
    $('.fish1').stop().animate({'margin-left': ww, 'margin-top': '-45px'}, 35000, function(){ 
    anf1(); // call self invoked function anf1 
    }); //move object to 100% of browser width 
    console.log('finish') 
} 
}(); 

HTML

JSfiddleリンクhttps://jsfiddle.net/qytkg5h2/2/

Answer 1

利用比較のために=が割り当てに使用されます。また、関数を再度呼び出す前に、元のCSSの最後にアニメーションを設定します。

//window 100% 
var ww = $('.container').outerWidth(); 
//window 0% 
var w0 = ww - ww; 
//window 50% 
var w50 = ww/2; 
//window 70% 
var w70 = (70/100) * ww; 


//version 1 
! function anf1(){ 
if(w0 == '0') { //always true will be executed 
    $('.fish1').stop().animate({'margin-left': w50, 'margin-top': '30px' }, 2500); //move object to the center of screen 

    console.log('start'); 
} 
if(w50 == w50) { //always true will be executed after 1st if condition 
    $('.fish1').stop().animate({'margin-left': w70, 'margin-top': '-30px'}, 900); //move object to 70% of browser width 
    console.log('middle') 

} 
if(w70 == w70) { //always true will be executed after the 2nd if condition 
    $('.fish1').stop().animate({'margin-left': ww, 'margin-top': '-45px'}, 3500, function(){ 
    $(this).css({ 
    'margin-left': '0px', 
    'margin-top': '0px'}); 
    anf1(); 
    // call self invoked function anf1 
    }); //move object to 100% of browser width 
    console.log('finish') 

} 
}(); 

JSFIDDLE