html5 - Need help for disable particular hover jQuery animation in smaller device -
this jquery code
$('.sol-card-container').hover(function () { $(".card-content", this).stop().animate({top: '160px'}, {queue: false,duration: 100}); $(".cta-txt-link", this).stop().animate({bottom: '-65px'}, {queue: false,duration: 600}); }, function () { $(".card-content", this).stop().animate({top: '0px'}, {queue: false,duration: 100}); $(".cta-txt-link", this).stop().animate({bottom: '0px'}, {queue: false,duration: 600}); });
html part have using bootstrap 3 version. issues is, these jquery code working fine in desktop layout, need disable animation in <767px breakpoint.
can suggest me how disable
you can wrap inside resize
event :
$(document).ready(function(){ var $w = $(window); var breakpoint = 768; $w.on('resize', function(){ if ($w.width() < breakpoint) return false; $('.sol-card-container').hover(function () { $(".card-content", this).stop().animate({top: '160px'}, {queue: false,duration: 100}); $(".cta-txt-link", this).stop().animate({bottom: '-65px'}, {queue: false,duration: 600}); }, function () { $(".card-content", this).stop().animate({top: '0px'}, {queue: false,duration: 100}); $(".cta-txt-link", this).stop().animate({bottom: '0px'}, {queue: false,duration: 600}); }); }).trigger('resize'); });
and call code when page loaded, not when resized should tirgger resize event( note trigger('resize')
).
if plan extend resize function more complex stuff go adding debounced resize better performance
Comments
Post a Comment