禁用.hover（）函数用于小屏幕jQuery

我可以请一些jQueryhoverfunction的帮助。 我的问题是我试图在div的hover上调用slieUp和slideDown函数，但我想为较小的屏幕禁用此效果，即当屏幕重新resize时。 如果我重新调整屏幕大小，我需要刷新页面以进行更改。 还尝试使用$(window).resize而不是$(document).ready但是在我重新调整窗口大小之前它不会工作

  $(document).ready(function() { if ($(window).width() > 990 ) { $('.block_holder').hover( function(){ $(this).find('.top_half').slideDown(450); }, function(){ $(this).find('.top_half').slideUp(450); } ); } }); 

Answer 1

试试像这样的resize事件处理程序

  $(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 }); 

演示： 小提琴

Answer 2

我宁愿建议你编写将dom设置为单独函数的代码。 然后你可以在每个window.resize上调用它。

 $(window).resize(function () { setblockholder(); }); 

这样确保了滑动/滑动的function不会在窗口resize时制动。

Answer 3

我建议你在resize事件上绑定函数：

 window.onresize = function(event) { ...your code goes here... } 

像这样：

 $(document).ready(function () { window.onresize = function(event) { if ($(window).width() > 990 ) { $('.block_holder').hover( function(){ $(this).find('.top_half').slideDown(450); }, function(){ $(this).find('.top_half').slideUp(450); } ); } } }