クリア間隔とアニメーションが機能しない

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>

私はあなたの代わりに不格好と遅いJSアニメーションの#eventwrapperを移動するためにCSSのキーフレームアニメーションを使用することにして見ていることも示唆していますjQueryが提供するメソッド。