Question

我正在尝试创建一个按钮来显示所有内容。我想在鼠标输入上输入fadein，在mouseleave上输入fadeout。当您单击该按钮时，它会禁用淡出，直到再次单击并重新启用它

这是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>

Answer 1

一种可能的解决方案是在按钮click事件中向显示的元素添加一个类。该类的目的是禁用淡入功能。再次单击该按钮时，将删除该类以重新启用淡入效果。

var flag = true;
$('button').click( function() {
  if (flag) {
    $('#div1h1').fadeIn().addClass('shown');
    flag = false;
  }
  else {
    $('#div1h1').fadeOut().removeClass('shown');
    flag = true;
  }
});

请参阅DEMO

Answer 2

请使用此代码：

fakeData()

}）;

或点击此链接：enter link description here

Answer 3

如果它已经可见，请不要触发fadein？

  $('#div1').not(":visible").hover(function() { 
     $('#div1h1').fadeIn(); 
  },

~~编辑 - 我的坏我没看到逗号:)，给我一个~~

Answer 4

将您的功能更改为：

$(function() {
    $('#div1').hover(function() { 
        $('#div1h1').fadeIn(); 
    });
    });
    $(function() {
    $('#div2').hover(function() { 
        $('#div2h2').fadeIn(); 
    });
    });
    $(function() {
    $('#div3').hover(function() { 
        $('#div3h3').fadeIn(); 
    });
});

Answer 5

假设你只想让H1淡入并让它们在悬停时保持可见，只需输入以下代码：

<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>

您提供的JSFiddle链接有一个额外的JavaScript部分，导致H1在悬停时淡出。

带按钮问题的JQuery FadeIn和FadeOut

5 个答案: