使用 jQuery effect .fadeTo() 与 toggle？

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

- Anonymous

Answer 1

你可以使用以下片段：

演示

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

- A. Wolff

---

都工作了...非常感谢！谢谢！谢谢！谢谢！谢谢！.... :) - Anonymous

Mary，如果您对这个答案感到满意，并且它按照您的问题正常工作，请将其标记为正确答案 :) - faerin

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>

- Wit Wikky

---

这种方法非常适合淡入淡出元素，但是使用这种方法无法控制不透明度的程度。 - HomTom