清除間隔和動畫不起作用

Question

除標記線外的所有內容均可用。如果該行被註釋的行代替 - 它可以工作。任何幫助？

var goev = setInterval(fgoev, 2000); 
 

 
function fgoev() { 
 
    $('#eventwrap').animate({ 
 
    bottom: 0 
 
    }, 900).delay(5000).animate({ 
 
    bottom: -10 
 
    }, 100).animate({ 
 
    bottom: 0 
 
    }, 100).animate({ 
 
    bottom: -10 
 
    }, 100).animate({ 
 
    bottom: 0 
 
    }, 100); 
 
} 
 

 
$('#evclose').click(function() { 
 
    clearInterval(goev); 
 
    $('#eventwrap').animate({ 
 
    bottom: -125 
 
    }, 900); // doesn't work 
 
    //$('#eventwrap').hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='eventwrap'> 
 
    <div id='evclose'>X</div> 
 
    <a href='event.php' target='_blank' id='evinside'> 
 
    <div id='evmore'>MORE</div> 
 
    <div id='evtitleleft'>Days</div> 
 
    <div id='evtitleright'>Hours</div> 
 
    <div class='clear'></div> 
 
    <div id='evdays'> 
 
     <?php echo $diffa; ?> 
 
    </div> 
 
    <div id='evhours'> 
 
     <?php echo $diffb ?> 
 
    </div> 
 
    <div class='clear'></div> 
 
    </a> 
 
</div>

Answer 1

的問題是，因爲你需要清除所有設置在#evclose事件處理程序的新的底部位置之前已經排隊了#eventwrap元素的動畫。要做到這一點，您可以使用stop(true)，像這樣：

var goev = setInterval(fgoev, 2000); 
 

 
function fgoev() { 
 
    $('#eventwrap').animate({ bottom: 0 }, 900).delay(5000) 
 
    .animate({ bottom: -10 }, 100) 
 
    .animate({ bottom: 0 }, 100) 
 
    .animate({ bottom: -10 }, 100) 
 
    .animate({ bottom: 0 }, 100); 
 
} 
 

 
$('#evclose').click(function() { 
 
    clearInterval(goev); 
 
    $('#eventwrap').stop(true, true).animate({ 
 
    bottom: -125 
 
    }, 900); 
 
});

#eventwrap { position: absolute; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='eventwrap'> 
 
    <div id='evclose'>X</div> 
 
    <a href='event.php' target='_blank' id='evinside'> 
 
    <div id='evmore'>MORE</div> 
 
    <div id='evtitleleft'>Days</div> 
 
    <div id='evtitleright'>Hours</div> 
 
    <div class='clear'></div> 
 
    <div id='evdays'> 
 
     <?php echo $diffa; ?> 
 
    </div> 
 
    <div id='evhours'> 
 
     <?php echo $diffb ?> 
 
    </div> 
 
    <div class='clear'></div> 
 
    </a> 
 
</div>

我也建議您在看使用CSS關鍵幀動畫移動#eventwrapper，而不是笨重，緩慢的JS動畫jQuery提供的方法。