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