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

jQuery hover（） - 鼠标在图像上运行时的视觉问题

1 个答案: