禁用小屏幕jQuery的.hover()函数 [英] disable .hover() function for small screens jQuery

问题描述

我可以在jQuery悬停功能上获得一些帮助吗?我的问题是我试图在div的悬停上调用slieUp和slideDown函数，但是我想在较小的屏幕(即调整屏幕大小)时禁用此效果.如果我调整屏幕大小，则需要刷新页面以进行更改.还尝试使用$(window).resize而不是$(document).ready，但是直到我重新调整窗口大小后它才起作用

Can i please get some help with jQuery hover function. My problem is I m trying to have a slieUp and slideDown function called on the hover of the div but i want to disable this effect for smaller screen i.e when screen is re-sized. If i re-size the screen i need to refresh the page for the change to take place. Also tried to use the $(window).resize instead of $(document).ready but it wont work until i re-size the window

   $(document).ready(function() {

   if ($(window).width() > 990 ) {   
      $('.block_holder').hover(

       function(){
            $(this).find('.top_half').slideDown(450);
          },

          function(){
              $(this).find('.top_half').slideUp(450);
          }
  );
 } 

});

推荐答案

尝试调整大小的事件处理程序，如

Try a resize event handler like

 $(document).ready(function () {
     $(window).resize(function () {
         if ($(window).width() > 990) {
             $('.block_holder').on('mouseenter.large', function () {
                 $(this).find('.top_half').slideDown(450);
             }).on('mouseleave.large', function () {
                 $(this).find('.top_half').slideUp(450);
             });
         } else {
             $('.block_holder').off('mouseenter.large mouseleave.large');
         }
     }).resize(); //to initialize the value
 });

演示:小提琴

这篇关于禁用小屏幕jQuery的.hover()函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！