我正在尝试创建一个按钮来显示所有内容。我想要鼠标进入时淡入，鼠标离开时淡出。当您单击该按钮时，它会禁用淡出，直到再次单击并重新启用它
这是 Jsfiddle:https://jsfiddle.net/uv4bxdxs/16/
<script>
function Show() {
$('#div1h1').fadeIn();
$('#div2h2').fadeIn();
$('#div3h3').fadeIn();
}
</script>
<body>
<button onclick="Show()">Show all</button>
<div id="div1">
<h1 id="div1h1">TEKST</h1>
</div>
<div id="div2">
<h1 id="div2h2">TEKST</h1>
</div>
<div id="div3">
<h1 id="div3h3">TEKST</h1>
</div>
</body>
最佳答案
一种可能的解决方案是向按钮click 事件上显示的元素添加一个类。该类的目的是禁用淡入淡出功能。当再次单击该按钮时，该类将被删除以重新启用淡入效果。
var flag = true;
$('button').click( function() {
if (flag) {
$('#div1h1').fadeIn().addClass('shown');
flag = false;
}
else {
$('#div1h1').fadeOut().removeClass('shown');
flag = true;
}
});
参见DEMO
关于javascript - JQuery 淡入和淡出与按钮问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33238629/