jQuery effect.fadeTo(）带有切换

jQuery effect .fadeTo() with toggle?

本文关键字：effect fadeTo jQuery      更新时间：2023-09-26

我想知道切换.fadeTo()效果的最简单方法，当有人再次单击Click Me!按钮时，它将再次反转过程。我的意思是就像.fadeToggle()一样工作。但是使用.fadeToggle()会导致div消失。

这是我的-JSFidle

HTML

<button>Click Me!</button>
<div></div>

CSS

div {
    background-color: #ff0000;
    width: 200px;
    height: 200px;
    margin: 20px
}

jQuery

$(document).ready(function(){
  $("button").click(function(){
  $("div").fadeTo(400,0.4);
  });
});

您可以使用以下代码段：

演示

$(document).ready(function () {
    $("button").click(function () {
        this.toggle = !this.toggle;
        $("div").stop().fadeTo(400, this.toggle ? 0.4 : 1);
    });
});

或者通常更好的解决方案是切换一个类：

演示

CSS：

div {
    background-color: #ff0000;
    width: 200px;
    height: 200px;
    margin: 20px;
    -webkit-transition: opacity 400ms linear;
    transition: opacity 400ms linear;    
}
div.faded {
    opacity:.4;
}

jQuery:

$(document).ready(function () {
    $("button").click(function () {
        $("div").toggleClass('faded');
    });
});

更简单

 <button>fadeToggle p1</button>
 <p>This paragraph has a slow, linear fade.</p>
  <script>
   $( "button:first" ).click(function() {
     $( "p:first" ).fadeToggle( "slow", "linear" );
   });
 </script>
相关文章：