56468

.fadeTo not able to delay to fade

Question:

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.

<strong>Jquery:</strong>

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

Answer1:

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

<pre class="snippet-code-js lang-js prettyprint-override">$(".more-post").on("click", function() { $('.bottom-post').fadeTo(5000, 0); }); <pre class="snippet-code-html lang-html prettyprint-override"><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>

<strong>OR</strong>

You can use <strong>jqueryUI</strong> toggleClass <a href="http://jqueryui.com/toggleClass/" rel="nofollow">here</a>

<pre class="snippet-code-js lang-js prettyprint-override">$(".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); }); <pre class="snippet-code-css lang-css prettyprint-override">.more-post { opacity: 1; } .hide-post { opacity: 0; } <pre class="snippet-code-html lang-html prettyprint-override"><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

Answer2:

You should try to set fadeTo('3000', 1). Here 3000 means 3 seconds. You can increase it for more slow fading.

Recommend

  • Seamless scrolling text
  • IE8 stops network access after 5 long polling request
  • setTimeOut and local function
  • How to lookup value with multiple criteria in excel 2007 and newer
  • Reloading table causes flickering
  • Python: sending key press events over SSH
  • Is looping through all style sheets and classes a good idea in JavaScript?
  • Is there a package like bigmemory in R that can deal with large list objects?
  • How can I replace the server in Web Component Tester
  • uml Composition relationships to RDF and OWL
  • Check all values in string[] for length?
  • Clear activity stack before launching another activity
  • Javascript, Regex - I need to grab each section of a string contained in brackets
  • Uncaught TypeError: $(…).select2 is not a function
  • Jenkins: FATAL: Could not initialize class hudson.util.ProcessTree$UnixReflection
  • How to view images from protected folder with php?
  • Install PHP intl extension on MacOS
  • Display images in Django
  • Is there a way to do normal logging with EureakLog?
  • Record samples being played with OpenAL
  • Asynchronous UI Testing in Xcode With Swift
  • DomPDF {PAGE_NUM} not on first page
  • Spring Data JPA custom method causing PropertyReferenceException
  • Javascript simulate pressing enter in input box
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • RectangularRangeIndicator format like triangular using dojo
  • Resize panoramic image to fixed size
  • Excel - Autoshape get it's name from cell (value)
  • Cross-Platform Protobuf Serialization
  • Sending data from AppleScript to FileMaker records
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Updated Ionic CLI but shows previous version (Windows)
  • Importing jscolor library in angular 2
  • Large data - storage and query
  • A cron job substitute?
  • Revoking OAuth Access Token Results in 404 Not Found
  • KeystoneJS: Relationships in Admin UI not updating
  • AngularJs get employee from factory
  • Load html files in TinyMce
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass