jQuery hover（）-鼠標在圖像上運行時的視覺問題

Question

嘿，我是jQuery的新手，幾乎沒有編程知識，所以請耐心等待。

我創建了一個腳本，該腳本將在懸停時在兩個圖像之間淡入淡出。 問題是，如果光標沒有懸停在圖像上，則淡入淡出效果會繼續，這意味着如果用戶在旅行到其他目的地時僅將光標移過圖像，他們就會看到完整的淡入淡出效果。 同樣，如果用戶多次將光標移到圖像上，則淡入淡出效果將顯示多次。

請在此處查看頁面底部的圖像：

http://ts564737-container.zoeysite.com/

請在下面查看我的jQuery：

var imgelement = "#element"; /* Element containing the original image */
var hoverimageurl = "www.domain.com/newimageurl.png"; /* Image URL of the hover image */

jQuery(document).ready(function() {

    /* Add CSS and a class to the original image to fix positioning and give it an identification */
    jQuery(imgelement + " img").addClass("originalimage").css("position", "relative");

    /* Prepend hover image to the element. Set the SRC to the hover image URL */
    jQuery(imgelement).prepend('<img class="hoverimage" style="position: absolute; width: 100% !important; height: 100% !important;" src="' + hoverimageurl + '">');

    /* Fade out original image and fade in hover image on hover */
    jQuery(imgelement).hover(function() {
        jQuery(imgelement + " .originalimage").fadeTo(1000, 0);
        jQuery(imgelement + " .hoverimage").fadeTo(1000, 1);
    }, function() {
        jQuery(imgelement + " .hoverimage").fadeTo(1000, 0);
        jQuery(imgelement + " .originalimage").fadeTo(1000, 1);
    });

});

有人可以建議我該怎么做才能避免這種情況的發生？ 非常感謝您的幫助。

Answer 1

使用.stop( true)在匹配的元素上停止任何當前正在運行的動畫。

jQuery(imgelement + " .hoverimage").stop( true).fadeTo(1000, 0);