.fade不能延迟淡入淡出 [英] .fadeTo not able to delay to fade

问题描述

尝试将淡入淡出延迟500到1000，但是当我将.fadeTo('500', 1);更改为.fadeTo('1000', 1);时，淡入淡出没有延迟.相同的时间，500到1000之间没有差异.

Trying to delay fade 500 to 1000, but when i change .fadeTo('500', 1); to .fadeTo('1000', 1); it's not delay to fade. Same timing, no difference between 500 to 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);.想要淡化更慢.谢谢.

This Jquery fade very fast, So how to fade delay more .fadeTo('1000', 1);. Want to fade more slow. Thanks.

推荐答案

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

When i removed the addClass() and changed $(".more-post").one to $(".more-post").on it started to work:

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

OR

您可以使用 jqueryUI toggleClass 此处

You can use 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>

这篇关于.fade不能延迟淡入淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！