jquery - javascript on hover is not working on ajax load? -
i using following code on hover.but code not work on 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> i found alternate following
<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> but not finding how fix second function.
, function(){ jquery(this).find('.pro-review').stop(true,true).animate({bottom:'-37'}, 200); jquery(this).find('.pro-view').hide(); }); how associate thing .on("hover",".products-grid .item", function () second function used first function
you can use mouseleave , mouseenter instead of hover 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(); }); or can combine 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');
Comments
Post a Comment