我正在为学校做一个作业，我们试图学习jQuery的基础知识。 其中一个要求是，当用户将鼠标悬停在"隐藏"按钮上时，图像的不透明度会发生变化，当鼠标离开"隐藏"按钮时，不透明度将恢复正常。当然，单击隐藏会使图像消失，"显示"应该使其重新出现。
我遇到的问题是，即使在用户单击"隐藏"之后，鼠标从该按钮移开后，图像也会淡入。我正在使用一个名为isHidden的布尔值，它开始被声明为假，当"隐藏"被单击时被更改为true，当单击"显示"时又回到false。我还有一些控制台日志来确保 isHidden 变量获得我期望的值。
我在这里查看了其他帖子，试图找到类似的问题。我知道我的逻辑中一定有错误，或者我只是误解了这些函数mouseenter和mouseleave的工作原理。
我真的只是在寻找一个人来解释我在这里做错了什么，以及一些更好的方法来解决这个问题。我尝试使用 .hover(( 并在检查 isHidden 是什么的 if 语句中移动，但我得到了相同的结果。非常感谢任何指导。谢谢！
这是我正在使用的代码：
$(document).ready(function() {
//Image variable for easy use
var image = $("img");
var isHidden = false;
//Hide effect
$("#hide").click(function() {
isHidden = true;
image.hide();
}); //End hidebutton
//Show effect
$("#show").click(function() {
isHidden = false;
image.show();
});
//Hover effect
if (isHidden == false) {
$("#hide").mouseenter(function() {
image.fadeTo(1000, 0.4);
console.log("mouseenter isHidden is " + isHidden);
});
$("#hide").mouseleave(function() {
image.fadeTo(1000, 1);
console.log("mouseleave isHidden is " + isHidden);
});
}
//Move effect
$("#move").click(function() {
image.animate({
left: '400px'
}, "slow");
}); //End of movebutton
//Enlarge effect
$("#enlarge").click(function() {
image.animate({
height: '400px',
width: '400px'
}); //End of animate
}); //End of enlargebutton
$("#circle").click(function() {
}); //End of circlebutton
}); //End of $document<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<p>jQuery simple assignment. Demonstrate that you can use basic jQuery functions.</p>
<img src="https://cdn.pixabay.com/photo/2013/07/18/10/56/smiley-163510_960_720.jpg" border=0 style="height:200px;width:200px;position:absolute;left: 100px;top: 150px;">
<p></p>
<button id="hide">Hide</button>
<button id="show">Show</button>
<p></p>
<button id="move">Move</button>
<button id="enlarge">Enlarge</button>
<button id="circle">Circle</button>扩展我的评论。
使用当前代码，您可以在ready上执行if语句。这意味着mouseenter和mouseleave的回调仅在该条件下绑定。这在第一次就有效，但是一旦图像被隐藏，条件就会改变，但回调仍然绑定到事件。
请考虑以下事项：
$(function() {
//Image variable for easy use
var image = $("img");
var isHidden = false;
//Hide effect
$("#hide").click(function() {
isHidden = true;
image.hide();
}); //End hidebutton
//Show effect
$("#show").click(function() {
isHidden = false;
if (parseFloat(image.css("opacity")) < 1) {
image.fadeTo(100, 1);
} else {
image.show();
}
});
//Hover effect
$("#hide").mouseenter(function() {
if (isHidden == false) {
image.fadeTo(1000, 0.4);
console.log("mouseenter isHidden is " + isHidden);
}
});
$("#hide").mouseleave(function() {
if (isHidden == false) {
image.fadeTo(1000, 1);
console.log("mouseleave isHidden is " + isHidden);
}
});
//Move effect
$("#move").click(function() {
image.animate({
left: '400px'
}, "slow");
}); //End of movebutton
//Enlarge effect
$("#enlarge").click(function() {
image.animate({
height: '400px',
width: '400px'
}); //End of animate
}); //End of enlargebutton
$("#circle").click(function() {
}); //End of circlebutton
}); //End of $document<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<p>jQuery simple assignment. Demonstrate that you can use basic jQuery functions.</p>
<img src="https://cdn.pixabay.com/photo/2013/07/18/10/56/smiley-163510_960_720.jpg" border=0 style="height:200px;width:200px;position:absolute;left: 100px;top: 150px;">
<p></p>
<button id="hide">Hide</button>
<button id="show">Show</button>
<p></p>
<button id="move">Move</button>
<button id="enlarge">Enlarge</button>
<button id="circle">Circle</button>另请查看show按钮。如果单击隐藏按钮，则会调整不透明度。然后单击"显示"时，它将处于未隐藏状态，但仍处于部分隐藏状态。所以我们更新它。
您可能还想看看.hover(). 与mouseenter和mouseleave基本相同，只是它合二为一。 https://api.jquery.com/hover/
希望有帮助。
你可以移动你的条件语句
if (isHidden === false)
在鼠标输入和鼠标离开事件中。
在你的$("#show"(.click函数中，使用这个：
image.fadeTo("fast",1)而不是image.show()
因此，每次单击"显示"按钮时，图像将始终处于不透明度 1 :)