jQuery動畫與setInterval（）

Question

我對動畫的暫停和看似不穩定的行爲感到困惑。暫停時間超過2000毫秒，動畫跳得更遠，然後我想要它。

function myFunction() { 
    myVar = setInterval(slideit, 2000); 
} 

我想運行的動畫序列每2秒（或6數秒之，但對於測試我會去2），但結果似乎有點不可思議。

我在做什麼錯？

我知道，我不需要回調動畫，但當窗口最小化時，整個事情不同步，所以我希望使用回調可以防止這種情況。

var myVar; 
 
var countit; 
 
countit = 1; 
 

 
function myFunction() { 
 
    myVar = setInterval(slideit, 2000); 
 
} 
 

 
function slideit() { 
 
    $(".bannertext").animate({ // Text out 
 
    opacity: 0, 
 
    "left": "-200px" 
 
    }, 500, function() { 
 
    $(".imgcontainer").animate({ // Next Image 
 
     "top": -($(".imgcontainer").height() * countit) 
 
    }, 500, function() { 
 
     $(".bannertext").animate({ // Text in 
 
     opacity: 1, 
 
     "left": "-20px" 
 
     }, 500); 
 
    }); 
 
    }); 
 

 

 
    countit = countit + 1; 
 
    if (countit == $(".imgcontainer").length) { 
 
    countit = 1; 
 
    } 
 
} 
 

 
myFunction();

#banner { 
 
    background: url(img/rauch-klein.jpg); 
 
    overflow: hidden; 
 
    height: 350px; 
 
    background-size: cover; 
 
} 
 
#subbanner { 
 
    width: 800px; 
 
    margin: 0 auto; 
 
} 
 
#banner .imgcontainer { 
 
    position: relative; 
 
    text-align: left; 
 
    height: 350px; 
 
} 
 
#banner img { 
 
    height: 100%; 
 
    vertical-align: middle; 
 
    position: absolute; 
 
    left: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="banner"> 
 
    <div id="subbanner"> 
 
    <div class="imgcontainer"> 
 
     <div class="bannertext">Absaugarm 150mm</div> 
 

 
     <img src="img/units/absaugarm.png" style="vertical-align:middle;"> 
 
    </div> 
 
    </div> 
 
    <div id="subbanner"> 
 
    <div class="imgcontainer"> 
 
     <div class="bannertext">Absaugarm 200mm</div> 
 

 
     <img src="img/units/absaugarm-200mm.png"> 
 
    </div> 
 
    </div> 
 
    <div id="subbanner"> 
 
    <div class="imgcontainer"> 
 
     <div class="bannertext">Absaugkran</div> 
 

 
     <img src="img/units/absaugkran.png"> 
 
    </div> 
 
    </div> 
 
    <div id="subbanner"> 
 
    <div class="imgcontainer"> 
 
     <div class="bannertext">Absaugtisch</div> 
 

 
     <img src="img/units/absaugtisch.png"> 
 
    </div> 
 
    </div> 
 
    <div id="subbanner"> 
 
    <div class="imgcontainer"> 
 
     <div class="bannertext">AIRTECH P10</div> 
 

 
     <img src="img/units/Airtech_P10.png"> 
 
    </div> 
 
    </div> 
 
    <div id="subbanner"> 
 
    <div class="imgcontainer"> 
 
     <div class="bannertext">AIRTECH P30</div> 
 

 
     <img src="img/units/Airtech_P30.png"> 
 
    </div> 
 
    </div> 
 
    <div id="subbanner"> 
 
    <div class="imgcontainer"> 
 
     <div class="bannertext">BlowTec</div> 
 

 
     <img src="img/units/BlowTec.png"> 
 
    </div> 
 
    </div>

Answer 1

從Jquery docs：

如果多個元素是動畫，則回調每 匹配元素，而不是一次執行一次爲動畫作爲一個整體

這意味着完整的功能被稱爲爲每個bannertext類元素。如果您不想僅淡出特定元素，則最快的解決方案是指回調函數內部的this。

function slideit() { 

    var cnt = countit; 
    $(".bannertext").animate({ // Text out 
    opacity: 0, 
    "left": "-200px" 
    }, 500, function() { 
    $(this).parent().animate({ // Next Image 
     "top": -($(".imgcontainer").height() * cnt) 
    }, 500, function() { 
     $(this).children(".bannertext").animate({ // Text in 
     opacity: 1, 
     "left": "-20px" 
     }, 500); 
    }); 
    }); 

    countit = countit + 1; 
    if (countit == $(".imgcontainer").length) { 
    countit = 1; 
    } 
} 

jsfiddle example。

（另一個副作用是，countit被馬上增加，在正常的執行，將不斷加大在執行第一個完整的回調之前。這就是爲什麼一個臨時變量CNT用作井）