清除间隔和动画不起作用

Question

除标记线外，一切正常。如果该行被注释的行替换 - 它可以工作。有什么帮助吗？

＆＃13;

＆＃13;

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();
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题是因为在#eventwrap事件处理程序中设置新的底部位置之前，您需要清除已在#evclose元素上排队的所有动画。为此，您可以使用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，而不是jQuery提供的笨重且缓慢的JS动画方法。