0

我在悬停时使用以下代码。但此代码不适用于 ajaxload。

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('.products-grid .item').hover(function(){ 
        jQuery(this).find('.pro-review').animate({bottom:'0'}, 200);
        jQuery(this).find('.pro-view').show();
    }, function(){  
        jQuery(this).find('.pro-review').stop(true,true).animate({bottom:'-37'}, 200);
        jQuery(this).find('.pro-view').hide();
    });
)};
</script>

我找到了这样的替代品，如下所示

<script type="text/javascript">
        jQuery(document).on("hover",".products-grid .item", function () {
            jQuery(this).find('.pro-review').animate({bottom:'0'}, 200);
            jQuery(this).find('.pro-view').show();
        });

</script>

但我没有找到如何修复第二个功能。

, function(){  
        jQuery(this).find('.pro-review').stop(true,true).animate({bottom:'-37'}, 200);
        jQuery(this).find('.pro-view').hide();
    });

如何关联第二个函数之类的东西，就像.on("hover",".products-grid .item", function ()我用于第一个函数一样

4

2 回答 2

2

'hover'实际上不是它自己的事件，而是其他 2 个事件的简写：

调用$(selector).hover(handlerIn, handlerOut)是以下的简写：

 $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

对于委托绑定，您可以直接指定它们：

jQuery(document).on({
    'mouseenter': function(){ 
        jQuery(this).find('.pro-review').animate({bottom:'0'}, 200);
        jQuery(this).find('.pro-view').show();
    },
    'mouseleave': function(){  
        jQuery(this).find('.pro-review').stop(true,true).animate({bottom:'-37'}, 200);
        jQuery(this).find('.pro-view').hide();
    }
}, '.products-grid .item');
于 2013-08-01T07:06:55.907 回答
1

您可以使用mouseleaveandmouseenter而不是hoverwith on。

jQuery(document).on("mouseleave",".products-grid .item", function () {
        jQuery(this).find('.pro-review').animate({bottom:'0'}, 200);
        jQuery(this).find('.pro-view').show();
});


jQuery(document).on("mouseenter",".products-grid .item", function () {
        jQuery(this).find('.pro-review').stop(true,true).animate({bottom:'-37'}, 200);
    jQuery(this).find('.pro-view').hide();
});

或者你可以结合mouseenter和mouseleave

$(document).on({
    mouseenter: function () {
         jQuery(this).find('.pro-review').animate({bottom:'0'}, 200);
         jQuery(this).find('.pro-view').show();
    },

    mouseleave: function () {
        jQuery(this).find('.pro-review').stop(true,true).animate({bottom:'-37'}, 200);
        jQuery(this).find('.pro-view').hide();
    }
}, '.products-grid .item');
于 2013-08-01T07:05:59.673 回答