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

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -