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);
});
This Jquery fade very fast, So how to fade delay more .fadeTo('1000', 1);
. Want to fade more slow. Thanks.
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
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>