.fadeTo 不能延迟淡出答案

【问题标题】：.fadeTo not able to delay to fade.fadeTo 不能延迟淡出
【发布时间】：2015-09-09 16:51:45
【问题描述】：

试图将淡入淡出 500 延迟到 1000，但是当我将 .fadeTo('500', 1); 更改为 .fadeTo('1000', 1); 时，它不会延迟淡入淡出。时间一样，500到1000没有区别。

jQuery：

$(".more-post").one("click", function () {

  $('.bottom-post').addClass('show-more').fadeTo('500', 0);

  setTimeout(function(){

    $('.bottom-post').addClass('show-more').fadeTo('500', 1);

  },4000);
});

这个Jquery 褪色非常快，所以如何褪色延迟更多.fadeTo('1000', 1);。想褪色更慢。谢谢。

【问题讨论】：

.fadeTo('1000', 1) = 出现在 1 秒内（持续时间） .fadeTo('1000', 0) 在 1 秒内消失（持续时间）。尝试 2000（2 秒）或 3000（3 秒）
谢谢，我试过2000(2 seconds)或3000(3 seconds)但没有任何变化，褪色很快！

标签： jquery function click fadeto

【解决方案1】：

当我删除 addClass() 并将 $(".more-post").one 更改为 $(".more-post").on 时开始工作：

$(".more-post").on("click", function() {

  $('.bottom-post').fadeTo(5000, 0);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="more-post">Click me to see the fade<div>
    <div class="bottom-post">Fade me slow<div>

或

你可以使用 jqueryUI toggleClass here

$(".more-post").on("click", function() {
  $('.bottom-post').toggleClass('more-post', 3000).toggleClass("hide-post", 5000);
});
$(".hide-post").on("click", function() {
  $('.bottom-post').toggleClass("hide-post", 3000).toggleClass('more-post', 5000);
});

.more-post {
  opacity: 1;
}

.hide-post {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="more-post">Click me to see slow fading<div>
  <p class="bottom-post hide-post">More stuff to be faded in</p>

【讨论】：

【解决方案2】：

你应该尝试设置fadeTo('3000', 1)。这里 3000 表示 3 秒。您可以增加它以实现更慢的褪色。

【讨论】：

谢谢，我已经尝试了 3000（3 秒）但没有任何变化，同样褪色非常快！
好的。尝试使用 hide() 和 show()。在此函数中，您可以添加快速、慢速或以毫秒为单位的时间等参数。更多细节在这里。 api.jquery.com/hide