jQuery懸停功能似乎沒有按預期工作

我應該調用鼠標「懸停」功能時遇到輕微問題。發生了什麼事是「懸停」功能被調用，並在圖像上執行轉換。但是，如果在轉換完成之前「懸停」，則「懸停」功能不會被調用。jQuery懸停功能似乎沒有按預期工作

我對JavaScript非常陌生，所以如果任何人都可以在我的腳本中發現一個很容易糾正以獲得預期功能的愚蠢錯誤，我將非常感激。

$(function() { 
    var easing = 'swing'; 

    var transitions = ['fadeToRight', 'fadeToLeft', 'fadeToTop', 'fadeToBottom']; 
    var transitionSpeed = 300; 

    var $product_container = $('#product_container'); 
    var $product_areas = $product_container.find('.product_area'); 
    var $product_images = $product_container.find('img'); 
    var imageCount = 0; 

    $product_images.each(function() { 
     var $this = $(this); 
     $('<img/>').load(function() { 
      ++imageCount; 
      if (imageCount == $product_images.length) { 
       $product_areas.each(function() { 
        $(this).hover(
         function() { 
          var $currImage = $(this).find('img'); 

          var transition = transitions[Math.floor(Math.random() * transitions.length)]; 

          switch (transition) { 
           case 'fadeToRight': 
            $currImage.animate(
             { 
              'left': $currImage.width() + 'px', 
              'opacity': '0' 
             }, 
             transitionSpeed, 
             easing, 
             function() { 
              $currImage.hide().css(
               { 
                'z-index': '1', 
                'left': '0px', 
                'opacity': '1' 
               }); 
             }); 
            break; 

           case 'fadeToLeft': 
            $currImage.animate(
             { 
              'left': -$currImage.width() + 'px', 
              'opacity': '0' 
             }, 
             transitionSpeed, 
             easing, 
             function() { 
              $currImage.hide().css(
               { 
                'z-index': '1', 
                'left': '0px', 
                'opacity': '1' 
               }); 
             }); 
            break; 

           case 'fadeToTop': 
            $currImage.animate(
             { 
              'top': -$currImage.height() + 'px', 
              'opacity': '0' 
             }, 
             transitionSpeed, 
             easing, 
             function() { 
              $currImage.hide().css(
               { 
                'z-index': '1', 
                'top': '0px', 
                'opacity': '1' 
               }); 
             }); 
            break; 

           case 'fadeToBottom': 
            $currImage.animate(
             { 
              'top': $currImage.height() + 'px', 
              'opacity': '0' 
             }, 
             transitionSpeed, 
             easing, 
             function() { 
              $currImage.hide().css(
               { 
                'z-index': '1', 
                'top': '0px', 
                'opacity': '1' 
               }); 
             }); 
            break; 

           default: 
            $currImage.animate(
             { 
              'left': -$currImage.width() + 'px' 
             }, 
             transitionSpeed, 
             easing, 
             function() { 
              $currImage.hide().css(
               { 
                'z-index': '1', 
                'left': '0px' 
               }); 
             }); 
            break; 
          } 
         }, 
         function() { 
          var $currImage = $(this).find('img'); 
          $currImage.show(); 
         }); 
       }); 
      } 
     }).attr('src', $this.attr('src')); 
    }); 
});

我還想說，如果過渡完成了「懸停去」功能不被調用，你再移動鼠標從容器中的圖像。當你不再徘徊時，它似乎很奇怪，它不會自動轉到其他函數。

來源

2012-07-17 James Croft

這很可能不是一個問題你的mouseout函數沒有被調用（實際上它被調用，就像你讓動畫完成時所觀察到的一樣），但是你的動畫搞亂了你的計劃。通過在離開元素後繼續，它將簡單地覆蓋您在mouseout函數中聲明的規則。

在鼠標移開功能添加stop()停止正在運行的動畫，之後着手：

 function() { 
      var $currImage = $(this).find('img'); 
      $currImage.stop().show(); 
     });

來源

2012-07-17 15:02:54 Christoph

這是一個稍微好一點的修補程序。我想我現在可以通過希望解決其他問題。調用停止是在轉換過程中停止它，但我需要重置圖像的值，使其位於原始位置。謝謝！ – 2012-07-17 15:11:43

可以取消以停止）所有早期的動畫（：

$currImage.stop().animate({some animation})

這裏是我的一個片段：

$("div").hover(function() 
{ 
    $(this).stop().animate({opacity: 1}, 400); 
}, 
function() { 
    $(this).stop().animate({opacity: 0}, 400); 
});

小提琴： http://jsfiddle.net/edGas/

來源

2012-07-17 14:59:37 Eirinn

jQuery懸停功能似乎沒有按預期工作

回答

相關問題