懸停時的jQuery動畫|非常快的傳球，停止動畫

Question

我已經創建了一個非常小的jQuery插件，用於個人使用，在懸停事件上在圖像上創建疊加層，然後爲兩個圖標設置動畫。

在鼠標移出時，它會再次動畫圖標，然後淡出覆蓋圖。

雖然動畫很好，但問題出現在圖標上。在快速傳遞鼠標動畫 - 圖標但不製作動畫 - 圖標。

在這裏你可以看到我是什麼意思一個活生生的例子：http://jsfiddle.net/merianos/yPerY/1/

繼源代碼

HTML

<section class="clearfix span-10 last post_container "> 
    <article> 
     <div class="imageHover"> 
      <span class="overlay"></span> 
      <a href="#" class="image_preview"></a> 
      <a href="#" class="image_link"></a> 
      <img src="http://goo.gl/YRC7G" /> 
     </div> 
    </article> 
</section>​ 

CSS

.post_container 
{ 
    position : relative; 
    margin : 100px; 
} 

    .post_container article 
    { 
     position : relative; 
     display  : block; 
     width  : 280px; 
    } 


     .post_container article img 
     { 
      width : 278px; 
      border : 1px solid #dfe1e0; 
     } 

      .post_container article .overlay 
      { 
       z-index  : 740; 
       display  : block; 
       width  : 100%; 
       height  : 121px; 
       background : #000; 
       opacity  : 0; 
       position : absolute; 
       top   : 0; 
       left  : 0; 
      } 


      .post_container article .image_link, 
      .post_container article .image_preview 
      { 
       display    : block; 
       width    : 32px; 
       height    : 32px; 
       position   : absolute; 
       cursor    : pointer; 
       z-index    : 741; 
       top     : 88px; 
       opacity    : 0; 
      } 

      .post_container article .image_link 
      { 
       background : #0AF; 
       left  : 98px; 
      } 

      .post_container article .image_preview 
      { 
       background : #F0A; 
       left  : 150px; 
      }​ 

的JavaScript

;(
    function($) 
    { 
     $.fn.extend(
      { 
       wplImageHover: function(options) 
       { 
        this.defaultOptions = {}; 

        var settings = $.extend({}, this.defaultOptions, options); 
        var image  = null; 

        var methods = { 
         init : function() 
         { 
          image.mouseenter(
           function(e) 
           { 
            var overlay = $(this).find('.overlay'); 

            overlay.stop().animate(
             { 
              'opacity' : '0.25' 
             }, 
             150 
            ); 

            overlay.queue(
             function() 
             { 
              var image_preview = $(this).siblings('.image_preview'); 
              var image_link  = $(this).siblings('.image_link'); 

              image_preview.stop().animate(
               { 
                'opacity' : 1, 
                'top'  : '44px' 
               }, 
               150 
              ); 

              image_link.stop().animate(
               { 
                'opacity' : 1, 
                'top'  : '44px' 
               }, 
               150 
              ); 

              $(this).dequeue(); 
             } 
            ); 

            e.preventDefault(); 
           } 
          ).mouseleave(
           function(e) 
           { 
            var image_preview = $(this).find('.image_preview'); 
            var image_link  = $(this).find('.image_link'); 

            image_preview.stop().animate(
             { 
              'opacity' : 0, 
              'top'  : 0 
             }, 
             150 
            ); 

            image_link.stop().animate(
             { 
              'opacity' : 0, 
              'top'  : 0 
             }, 
             150 
            ); 

            image_link.queue(
             function() 
             { 
              var overlay = $(this).siblings('.overlay'); 

              overlay.stop().animate(
               { 
                'opacity' : 0 
               }, 
               150 
              ); 

              overlay.queue(
               function() 
               { 
                $(this).css(
                 { 
                  'opacity' : '0' 
                 } 
                ); 

                $(this).siblings('.image_link, .image_preview').css(
                 { 
                  'opacity' : '0', 
                  'top'  : '88px' 
                 } 
                ); 

                $(this).dequeue(); 
               } 
              ); 

              $(this).dequeue(); 
             } 
            ); 

            e.preventDefault(); 
           } 
          ); 
         } 
        } 

        return this.each(
         function() 
         { 
          image = $(this); 

          methods.init(); 
         } 
        ); 
       } 
      } 
     ); 
    } 
)(jQuery); 

$('.imageHover').wplImageHover();​ 

任何人可以幫助我嗎？

親切的問候 Merianos尼科斯

Answer 1

Demo JSFiddle

在鼠標離開事件將頂部和不透明使用CSS停止正在使用這些圖像發生的動畫圖像之前。否則，它將覆蓋您正在應用的CSS（僅當應用CSS時動畫正在發生）。在我們移動速度非常快的情況下，您在鼠標中輸入的動畫正在發生。所以這導致了這個問題。

因此請嘗試下面的腳本。

;(
function($) 
{ 
    $.fn.extend(
     { 
      wplImageHover: function(options) 
      { 
       this.defaultOptions = {}; 

       var settings = $.extend({}, this.defaultOptions, options); 
       var image  = null; 

       var methods = { 
        init : function() 
        { 
         image.mouseenter(
          function(e) 
          { 
           var overlay = $(this).find('.overlay'); 

           overlay.stop().animate(
            { 
             'opacity' : '0.25' 
            }, 
            150 
           ); 

           overlay.queue(
            function() 
            { 
             var image_preview = $(this).siblings('.image_preview'); 
             var image_link  = $(this).siblings('.image_link'); 

             image_preview.stop().animate(
              { 
               'opacity' : 1, 
               'top'  : '44px' 
              }, 
              150 
             ); 

             image_link.stop().animate(
              { 
               'opacity' : 1, 
               'top'  : '44px' 
              }, 
              150 
             ); 

             $(this).dequeue(); 
            } 
           ); 

           e.preventDefault(); 
          } 
         ).mouseleave(
          function(e) 
          { 
           var image_preview = $(this).find('.image_preview'); 
           var image_link  = $(this).find('.image_link'); 

           image_preview.stop().animate(
            { 
             'opacity' : 0, 
             'top'  : 0 
            }, 
            150 
           ); 

           image_link.stop().animate(
            { 
             'opacity' : 0, 
             'top'  : 0 
            }, 
            150 
           ); 

           image_link.queue(
            function() 
            { 
             var overlay = $(this).siblings('.overlay'); 

             overlay.stop().animate(
              { 
               'opacity' : 0 
              }, 
              150 
             ); 

             overlay.queue(
              function() 
              { 
               $(this).css(
                { 
                 'opacity' : '0' 
                } 
               ); 

               $(this).siblings('.image_link, .image_preview').stop().css(
                { 
                 'opacity' : '0', 
                 'top'  : '88px' 
                } 
               ); 

               $(this).dequeue(); 
              } 
             ); 

             $(this).dequeue(); 
            } 
           ); 

           e.preventDefault(); 
          } 
         ); 
        } 
       } 

       return this.each(
        function() 
        { 
         image = $(this); 

         methods.init(); 
        } 
       ); 
      } 
     } 
    ); 
} 
)(jQuery); 

$('.imageHover').wplImageHover();​