.fadeTo无法延迟淡出

Question

尝试将淡入淡出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);。想要褪色更慢。感谢。

Answer 1

当我删除addClass（）并更改 $（＆＃34; .more-post＆＃34;）。一个更改为 $（＆＃34; .more-post＆＃ 34;）。on 它开始起作用了：

＆＃13;

＆＃13;

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

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

});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

或

您可以使用 jqueryUI toggleClass here

＆＃13;

＆＃13;

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

＆＃13;

.more-post {
  opacity: 1;
}

.hide-post {
  opacity: 0;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你应该尝试设置fadeTo（'3000'，1）。 这里3000意味着3秒。你可以增加它以减缓褪色。