jQuery使用窗口调整大小如果语句不起作用

Question

我搜索了很多关于这个问题，但找不到任何真正适合我需要的答案。当我将一些div悬停在我的网页的其他部分时，我想将css不透明效果放在同一图像上。

代码看起来像这样：

$(document).ready(function() {	

        opacityEffect();
	$(window).resize(function() {
		opacityEffect();
	});
					
	function opacityEffect() {
										
		var windowsize = $(window).width();
		if (windowsize > 980) {
			$('.hover-box a').on('mouseover', function(){
				$('.image-box img').animate({
					opacity: 0.2
				}, 0 );
                        });
			$('.hover-box a').on('mouseleave', function(){
				$('.image-box img').animate({
					opacity: 1
				}, 0 );
			});
                 }
        }
});

<div class="main">
  <div class="image-box">
      <img src="images/image1" alt="" title="">
  </div>
  
  <div></div>
  <div></div>
  <div></div>
  .
  .
  .
  .
  <div></div>
  <div></div>
  <div></div>
                
  <div class="hover-box">
    <a href="">Hover mouse here</a>
  </div>

问题是，当调整页面窗口大小时，它会在980px和980px以下应用css不透明度效果。怎么会这样？我真的不明白这一点。看起来“if”不存在。

不知何故，我通过在ELSE语句中使用相同的代码覆盖它，并将第一个不透明度值更改为1，但是在窗口调整大小后1到3秒内对图像的不透明度影响减慢了。任何sugestions？谢谢

----------

首先，我修改了我输入错误的代码。而且我研究了泰森的帖子

  

编辑：当窗口调整大小时，您的代码将不断添加事件处理程序。

所以我找到了这个解决方案（为了完全理解而苦苦挣扎），但它适用于我的问题：

jQuery(function($){

	// flag to allow hover
	var hoverAllowed = true;
			
	// hover function
	$('.hover-box a').on('mouseover', function(){
		if (hoverAllowed) {
			$('.image-box img').animate({
				opacity: 0.2
			}, 0 );
		}
	});		
					
	$('.hover-box a').on('mouseleave', function(){
		if (hoverAllowed) {
			$('.image-box img').animate({
				opacity: 1
			}, 0 );
		}
	});
				
	// check if browser size is compatible with hover event
	onResize = function() {
		//if browser size is smaller than 980, disallow hover
		if($(window).width() < 980){
			hoverAllowed = false;
		}
                // if browser size is greater than 980, allow hover
		else{
			hoverAllowed = true;
		}
		// checking is hover allowed or not
		//console.log(hoverAllowed);
	}
			
	$(document).ready(onResize);
	$(window).bind('resize', onResize);
				
});

Answer 1

您在最后一行有一个Javascript错误：

        });
});

应该是

        };
});

编辑：当窗口调整大小时，您的代码将不断添加事件处理程序。