jQuery hover() - Visual Issue, когда мышь работает над изображением

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);