Question

您好我的图像大约150px宽，300px深。当我滚过它时，我想在顶部弹出一个小图像。当我滚动较大的图像时，我希望较小的图像消失。

这一切都有效，除非你将鼠标悬停在新图像弹出的触发图像上，那么当你移动它时，它似乎会进入某种循环或行为不规律。我试过悬停和鼠标悬停/外出。我预计它会在移动鼠标时触发rolloff / rollon事件。

您可以看到www.ypfservice.net

提前致谢

电子

这是我的jQuery：

$(document).ready(function () {
    var numberLinks = $('a.panelImage').length;

    for (var j = 0; j < numberLinks; j++) {

        var currentLink = $('a.panelImage').eq(j);

        //    var currentLink = $('a.panelImage:eq('+j+')');                  
        $('<div class="fred"></div>').insertAfter(currentLink);

        var gtr = currentLink.position().left + 'px';

        $(currentLink).next().css({ // ie div.fred
            'position': 'absolute',
            'background-position': '0 0',
            'top': '100px',
            'left': gtr,
            'display': 'none',
            'width': '5px',
            'height': '5px',
            'overflow': 'hidden',
            'backgroundImage': 'url(http://www.ypfservice.net/templates/ypftemplate/images/foyerPreview.jpg)',
        });

    }


    $('a.panelImage img').mouseover(function () {
        $(this).parent().next().stop().animate({
            height: '138px',
            width: '184px'
        }, 500)
    }).mouseout(function () {
        $(this).parent().next().stop().animate({
            'width': '0px',
            'height': '0px'
        }, 500);
    }); //end function

});

Answer 1

处理父元素的mouseover / mouseout事件：

$('a.panelImage').parent().mouseover(function () {
    $(this).find(".panelImage").next().stop().animate({
        height: '138px',
        width: '184px'
    }, 500)
}).mouseout(function () {
    $(this).find(".panelImage").next().stop().animate({
        'width': '0px',
        'height': '0px'
    }, 500);
}); //end function

Answer 2

较小的图像是较大图像的同一选择器的一部分。当您将鼠标移出较大的图像并将鼠标移到较小的图像上时，会触发事件和结束事件。

尝试为较大的图片提供ID，然后使用它。

Answer 3

使用mouseenter和mouseleave代替。触摸动画元素时，jQuery会触发mouseout。使用mouseenter / mouseleave不会发生这种情况。

jQuery在简单动画上的不稳定触发

3 个答案: