Member Avatar for vizz

I want to fade out logo and fade in after fade out is completed

$(".navlist li a").click(function() {

     $("#logo").fadeOut("slow").delay(850).fadeIn("slow");

});

This code is not working well. fadeIn occurs fastly I used values instead "slow" but it fade out correctly and fade in fastly

  • 2 Contributors
  • 6 Replies
  • 130 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by vizz

Dani AI

Generated

Short answer: the sequencing that recommended is correct, but the difference between jsFiddle and your local page usually points to an environment problem (most often the click is causing a navigation before the second animation runs, or another script/setting is disabling or interrupting animations). Since reported it works in jsFiddle but not on localhost with jquery-1.8.3, try preventing the link's default action and explicitly redirect after the animation finishes. Also check for duplicate jQuery includes, any code that sets $.fx.off, or CSS/JS that forcibly changes display or opacity.

A safe pattern that prevents navigation until animations are complete (and avoids queued animations from repeated clicks) looks like this:

$(".navlist").on("click", "li a", function(e){
  e.preventDefault();
  var $logo = $("#logo");
  var href = this.href;
  $logo.stop(true,true).animate({opacity:0},600, function(){
    setTimeout(function(){
      $logo.animate({opacity:1},1000, function(){
        if (href && href !== "#") window.location.href = href;
      });
    }, 850);
  });
});

Troubleshooting checklist:

  • Log inside the click handler to confirm it runs locally.
  • Check the console for JS errors that might abort the callback chain.
  • Verify only one jQuery is loaded (look for multiple <script> tags or check jQuery.fn.jquery in the console).
  • Verify animations are not globally disabled (console.log($.fx.off)).
  • Make sure no CSS rule uses display:none !important or a CSS transition that conflicts with jQuery.

References: jQuery animation docs (animate) and the DOM event method (Event.preventDefault).

Recommended Answers

All 6 Replies

Member Avatar for pritaeas

You'll need to chain those events. fadeOut has a callback function as parameter that gets called when the fadeout is complete.

$("#logo").fadeOut("slow", function(){ $("#logo").fadeIn("slow") });
Member Avatar for vizz

I tried this but problem occurs at fadeIn

I need ,

wait few seconds After fadeOut and then fadeIn "#logo"

Member Avatar for pritaeas 
$("#logo").fadeOut("slow", function(){ $("#logo").delay(850).fadeIn("slow") });
Member Avatar for vizz

I have already tried this too, but .fadeIn("slow") is not working even after adding .delay(850) or adding like this .fadeIn(1200) also not working

Member Avatar for pritaeas

What version of jQuery are you using? Upload your code sample to jsFiddle, so we can see it all.

Edited by pritaeas
Member Avatar for vizz

http://jsfiddle.net/vUNP8/

It is working well in jsFiddle. But it create problem on localhost only for .fadeIn(1200) & I'm using jquery-1.8.3.min.js

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.