jQuery fadeIn fadeOut 悬停时暂停

Question

我有一个小的 jQuery 片段，它将在选定的时间间隔内淡入和淡出一组 div。我现在需要在悬停时暂停淡入淡出，然后在鼠标移出时恢复。任何帮助表示赞赏。这是相关代码。

以下是我体内的位置

<div class="gcRotate">
      <div class="gcRotateContent">
         <div style="border: solid 2px black; text-align: center; width: 150px;">
            This is first content
            <img src="http://pix.motivatedphotos.com/2008/6/16/633492359109161542-Skills.jpg"
               alt="Dude" />
         </div>
      </div>
      <div class="gcRotateContent">
         <div style="border: solid 2px black; text-align: center; width: 150px">
            This is second content
            <img src="http://www.funnycorner.net/funny-pictures/5010/cheezburger-locats.jpg"
               alt="Dude" />
         </div>
      </div>
      <div class="gcRotateContent">
         <div style="border: solid 2px black; text-align: center; width: 150px">
            This is third content
            <img src="http://icanhascheezburger.files.wordpress.com/2007/06/business.jpg" alt="Dude" />
         </div>
      </div>
   </div>
   <div>
      This shouldn't move.
   </div>

   <script type="text/javascript">
      function fadeContent() {

         $(".gcRotate .gcRotateContent:hidden:first").fadeIn(500).delay(2000).fadeOut(500, function() {
         $(this).appendTo($(this).parent());

            fadeContent();
         });
      }

      $(".gcRotate").height(0);

      $(".gcRotateContent").each(
         function() {
            if ($(".gcRotate").height() < $(this).height()) {
               $(".gcRotate").height($(this).height());
            }
         }
         );

      $(".gcRotateContent").each(function() {
         $(this).css("display", "none")
      });

      fadeContent();


   </script>

Answer 1

我自己想出了这个办法。

<div class="gcRotate">
      <div class="gcRotateContent">
         <div style="border: solid 2px black; text-align: center; width: 150px;">
            This is first content
            <img src="http://pix.motivatedphotos.com/2008/6/16/633492359109161542-Skills.jpg"
               alt="First" />
         </div>
      </div>
      <div class="gcRotateContent">
         <div style="border: solid 2px black; text-align: center; width: 150px">
            This is second content
            <img src="http://www.funnycorner.net/funny-pictures/5010/cheezburger-locats.jpg"
               alt="Second" />
         </div>
      </div>
      <div class="gcRotateContent">
         <div style="border: solid 2px black; text-align: center; width: 150px">
            This is third content
            <img src="http://icanhascheezburger.files.wordpress.com/2007/06/business.jpg" alt="Third" />
         </div>
      </div>
   </div>
   <div>
      This shouldn't move.
   </div>

   <script type="text/javascript">
      function fadeContent() {

         $(".gcRotateContent").first().fadeOut(500, function() {
            $(".gcRotateContent:hidden:first").fadeIn(500)
         });
         $(".gcRotateContent").first().appendTo($(".gcRotateContent").parent());
      }

      $(".gcRotate").height(0);

      $(".gcRotateContent").each(
         function() {
            if ($(".gcRotate").height() < $(this).height()) {
               $(".gcRotate").height($(this).height());
            }
         }
         );

      $(".gcRotateContent").each(function() {
         $(this).css("display", "none")
      });

      $(".gcRotate").hover(function() {window.clearInterval(timer)}, function() {timer = window.setInterval("fadeContent()", 2000)});

      $(".gcRotateContent").first().show(0);
      var timer = window.setInterval("fadeContent()", 2000);


   </script>