Question

我想知道当有人再次点击.fadeTo()按钮时切换Click Me!效果的最简单方法，然后它会再次反转该过程。我的意思就像.fadeToggle()的作品或类似的东西。但是使用.fadeToggle()会导致div消失。

这是我的 - JSFiddle

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);
  });
});

Answer 1

您可以使用以下代码段：

DEMO

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

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

DEMO

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');
    });
});

Answer 2

更简单，

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

jQuery效果.fadeTo（）与切换？

2 个答案:

DEMO

DEMO