javascript - 每次打开类 div 时，使 .delay() 和 .animate() 函数重新运行

Question

所以，我确定对此有一个简单的答案，但经过 2 天的研究我找不到解决方案。

故事:我有一个动态页面。当您到达一个部分并单击 6 个选项之一时，它会显示一些信息(姓名、地点等)。我有一个 jQuery 函数，可以在几秒钟后将信息隐藏一半。当您将鼠标悬停在该部分上时，它也会随着鼠标离开而上下移动。

问题:如果单击这 6 个选项中的另一个，如何使整个函数再次运行？每次选择一个选项时，都会出现带有该信息的类，但在此函数运行一次后(延迟部分和动画向下部分)它只会保持最小化，除非你将鼠标悬停在它上面。我希望它每次都出现，然后运行该函数。我已经尝试了很多事情，我确信有一个简单的解决方案，只是不确定它是什么。

这是我的带有示例的代码笔的链接:http://codepen.io/jsegarra/pen/GxByr

我还尝试将所有这些都包装在一个点击功能中，用于点击这 6 个选项之一，并认为这可以解决问题，但仍然是同样的事情:

 $(document).ready(function () {
     $('.title').click(function () {
    $('.bottomTab').delay(5000).animate({
        height: '50px' // to 50px
    }, 'slow');

    $(".bottomTab").hover(
      //on mouseover
      function () {
          $(this).stop().animate({
              height: '+=100'  //adds 50px
          }, 'slow');
      },
      //on mouseout
      function () {
          $(this).stop().animate({
              height: '50px' //back to 50px
          }, 'slow');
      });
   });
});

Answer 1

在重新运行函数之前重置 div css

 $(document).ready(function () {
 $('.title').click(function () {
   $('.bottomTab').css('height', '100px').delay(500).animate({
    height: '50px' // to 50px
}, 'slow');

$(".bottomTab").hover(
  //on mouseover
  function () {
      $(this).stop().animate({
          height: '+=100'  //adds 50px
      }, 'slow');
  },
  //on mouseout
  function () {
      $(this).stop().animate({
          height: '50px' //back to 50px
      }, 'slow');
  });
});
});

这是我使用那个 javascript 的 html

<div class="title">title</div>
<div class="bottomTab">This is going to move from just being about 50 pixels high to about 100 pixels high after i add in some mouseenter and mouse out events</div>

我使用了与您的代码笔相同的 CSS，结果是一个完全可重新点击的选项