Question

我可以请一些jQuery悬停功能的帮助。我的问题是我试图在div的悬停时调用slieUp和slideDown函数，但我想为较小的屏幕禁用此效果，即重新调整屏幕大小时。如果我重新调整屏幕大小，我需要刷新页面以进行更改。还尝试使用$(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
 });

演示：Fiddle

Answer 2

我建议你在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);
      }
   );
  } 
}
}

Answer 3

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

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

这样可以确保slideup / slidingown的功能不会在窗口调整大小时制动。

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

3 个答案: