Question

我添加了一个效果非常好的悬停效果，但问题是当我加载更多项目时（鼠标单击时）我的悬停效果不可见。工作形象： http://prntscr.com/6w0s0h 不工作的部分： http://prntscr.com/6w0t04

这是我为悬停效果制作的代码：

 $('.holder').each(function() {
        var element = $(this);
        var width = $(this).parent().width();
        var height = $(this).parent().height();
        var img = $(this).find('img');
        var hover_in = $(this).find('.holder_in');
        var hover_in_w = $(this).find('.holder_in').width();
        var hover_in_h = $(this).find('.holder_in').height();
        hover_in.css({
            display: 'block',
            width: width - 40,
            bottom: -hover_in_h*3
        });
        $(this).on( 'mouseenter', function() {
            $(img).animate({
                opacity: 0.8
            }, 200);
            $(hover_in).animate({
                bottom: 20
            }, 200);
        }).on( 'mouseleave', function() {
            $(img).animate({
                opacity: 1
            }, 200);
            $(hover_in).animate({
                bottom: -hover_in_h*3
            }, 200);
        });
 });

感谢您的时间。

Answer 1

您可以采取一些措施来改善这一点。

为了支持动态添加的元素，您通常会使用委派的事件处理程序。 on支持连接到不变的祖先元素。这通过侦听事件然后应用jQuery选择器来工作。这意味着元素只需要在事件时匹配，而不是在事件被注册时匹配。如果没有更接近/方便的话，默认的祖先是document。

尝试尽可能重用选择器结果，而不是重新查询它们的DOM。只需将它们保存到var。你有一个叫做元素，但从未再次使用过。

此外，您需要尝试确保在第一个mouseenter之前运行css设置代码。我通过触发所有持有者的假mouseleave事件来做到这一点。

$(document).on('mouseenter', '.holder', function () {
    var img = $('img', this);
    $(img).animate({
        opacity: 0.8
    }, 200);
    $('.holder_in', this).animate({
        bottom: 20
    }, 200);
});

$(document).on('mouseleave', '.holder',  function () {
    var element = $(this);
    var height = element.parent().height();
    var hover_in = element.find('.holder_in');
    var hover_in_h = hover_in.height();
    var width = element.parent().width();

    hover_in.css({
        display: 'block',
        width: width - 40,
        bottom: -hover_in_h * 3
    });

    $('img', this).animate({
        opacity: 1
    }, 200);
    hover_in.animate({
        bottom: -hover_in.height() * 3
    }, 200);
});

// Trigger initial state
$('.holder').trigger('mouseleave');

JSFiddle： http://jsfiddle.net/TrueBlueAussie/1fdfqpsq/3/

注意，加载任何新元素后，您仍需要至少运行$('.holder').trigger('mouseleave');。我确信可以将初始状态设置为样式，但是您需要显示更多的实际HTML。

Answer 2

将on()函数移到each()函数之外。 each()不适用于动态生成的元素。

然后，您必须在on()函数中移动变量。

它应该有用。

编辑：应该委派函数并将其重写为：

$(document).on('mouseleave', '.selector-class', function() {

Answer 3

您可以尝试将事件放在每个事件之外。我还创建了一个名为ApplyEach的单独函数，每次绑定新图像时都需要调用它。

//每次绑定一些图像时，请调用：ApplyEach

function ApplyEach(){
  $('.holder').each(function() {
    var element = $(this);
    var width = $(this).parent().width();
    var height = $(this).parent().height();
    var hover_in = $(this).find('.holder_in');
    var hover_in_w = $(this).find('.holder_in').width();
    var hover_in_h = $(this).find('.holder_in').height();

    $(this).data('bottom', -hover_in_h*3);

    hover_in.css({
        display: 'block',
        width: width - 40,
        bottom: -hover_in_h*3
       });
  });
}


$(document).on( 'mouseenter', '.holder', function() {
    $(this).find('img').animate({
        opacity: 0.8
    }, 200);
    $(this).find('.holder_in').animate({
        bottom: 20
    }, 200);
})

$(document).on( 'mouseleave', '.holder', function() {
    $(this).find('img').animate({
        opacity: 1
    }, 200);
    $(this).find('.holder_in').animate({
        bottom: $(this).data('bottom');
    }, 200);
});

Answer 4

使用bind()代替on()，试试并告诉我

悬停对新点击加载元素的影响

4 个答案: