jQuery效果.fadeTo()与切换？

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