CODEWITHSUNDEEP
jqueryuploadifyfade
James Dawson
James Dawson

Reputation: 5409

Hiding page elements using jQuery animations without it leading to display: none;

I'm using the Uploadify plugin to upload files to my server, and I want the upload form to fade away and the progress bar to fade in once the upload initializes. Only problem is, Uploadify stops working when the upload form gets the display: none; property, which all jQuery fading effects seem to lead to after their duration.

I tried doing:

$('#upload-form').css('opacity', 0);

which works. The upload continues after the form is hidden, but it doesn't have a fading effect.

Any solution? Thanks!

Upvotes: 0

Views: 222

Answers (3)

OG Sean
OG Sean

Reputation: 1065

If you just set transition-duration: 1s; in your example, it will fade over by just native CSS support.

However, as of 2024, you can do fade effects pretty nicely / smoothly with only CSS, and you can use jQuery to just apply or remove a class with the opacity you want and a transition-duration and it's probably a lot easier that way, but even that part could pretty easily just be vanilla JS and you can avoid the slow load time of waiting for jQuery, too.

Just use the CSS property transition-duration in addition to whatever opacity, for example:

.fade-to-visible {  transition-duration: 1s; opacity: 1; }
.fade-to-invisible { transition-duration: 2s; opacity: 0; }

In this example, setting the fade-to-invisible class will fade out in 2 seconds, and then removing that and setting the class fade-to-visible would fade in over 1 second, jQuery not even needed.

jQuery animations or jQuery fade functions are not even necessary for a simple change like opacity to/from 0, and it will avoid problems with jQuery ending hide() animations with display: none etc. and will have some standard CSS easing options available that are built in without needing jQuery or jQuery UI too. This keeps the style tag open and available for whatever else, too, so I think it's a cleaner solution.

If you set the CSS for any property for that matter, it will animate over the length of the the transition duration as long as a starting value was set. So in this case "opacity" transitioning achieves the "fade" effect natively in all modern browsers without any third party plugin needed, though using jQuery to set or remove classes is still probably the fastest / most convenient way to do that instead of vanilla JS.

A couple notes though -

  1. Google seo bots don't like CSS animations on landing pages above the fold for google page speed scores. Google prefers other types of animations for whatever crawling reasons. So if that type of page speed score optimization is a goal, you may want to avoid any automatic jQuery or CSS animations above the fold all together and save it for something that happens on a user-triggered event during the post-page-load ux instead.

  2. CSS Transitions don't work if there's no starting value set. You can't transition from nothing to something, and it doesn't assume no setting is 0 as you might think it would. You have to set it to starting property initially, like 100 opacity, before settings a class for 0 opacity, to have the CSS transition work.

  3. "opacity" 0 invisibility still allows for objects to be clickable and have pointer events in the location it's at, so it can block clicking on anything behind it on page even when it's invisible and cause UX problems if left on screen invisible. This is generally why the default for jQuery is to set display to None after fading out. You can add CSS property pointer-events: none; to remove mouse functionality while invisible as an easy fix.

Upvotes: 0

Ortiga
Ortiga

Reputation: 8814

You can use jQuery.animate:

$('#upload-form').animate({
    opacity: 0
}, 'slow');

Upvotes: 0

Māris Kiseļovs
Māris Kiseļovs

Reputation: 17275

This may be a workaround:

$('#upload-form').fadeTo(1000, 0.01, function() {
    $(this).css('opacity', 0);
});

Upvotes: 3

Related Questions