本文介绍了.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="ajax.googleapis/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="ajax.googleapis/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//code.jquery/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不能延迟淡入淡出
发布评论