jquery - 为什么这个效果只在第一次有效？

Question

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

如何使动画始终有效，而不仅仅是第一次？

来源:How to run jQuery fadeIn() and slideDown() simultaneously?

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() 方法，以便在设置元素动画之前隐藏该元素。

这样做会多次起作用:

Updated Example

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