javascript - 带有切换的 jQuery 效果 .fadeTo()？

Question

我想知道当有人再次点击 Click Me! 按钮时切换 .fadeTo() 效果的最简单方法，然后它将再次反转该过程。我的意思是就像 .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');
    });
});