为什么这种效果只在第一次起作用

Question

我在stackoverflow上发现了这段有用的代码，但由于某种原因，它只在第一次应用时有效，以后再也不会了。。。。

我如何才能让动画始终发挥作用，而不仅仅是第一次？

来源：如何同时运行jQuery fadeIn（）和slideDown（）？

jQuery(document).ready(function( $ ) {
  var something3 = document.getElementById('nav-action');
  something3.style.cursor = 'pointer';
  something3.onclick = function() {
    $(".menu-item")
      .css('opacity', 0)
      .slideDown('slow')
      .animate(
        { opacity: 1 },
        { queue: false, duration: 'slow' }
      );
  });

这是我的CSS

.menu-item {
  font-size: 61px;
  font-weight: 100 !important;
  list-style: outside none none;
  margin-top: 12px;  list-style: none;
  padding: 5px; opacity:0;
  display:none;
}

Answer 1

它只工作一次的原因是.slideDown()方法会将元素的display设置为block，然后每隔单击一次，您只会设置不透明度的动画。您可以链接.hide()方法，以便在设置动画之前隐藏元素。

这样做，它将多次工作：

更新示例

$(".menu-item")
  .hide()
  .css('opacity', 0)
  .slideDown('slow')
  .animate(
    { opacity: 1 },
    { queue: false, duration: 'slow' }
);