How to omit opacity changes from jQuery show()

Question

I want to use the jQuery show(700) function, but I do not want any opacity changes. The element in question has a background PNG image with alpha transparency, and the opacity change causes strange black borders around the background image during the animation. How can I omit opactiy animation from the show() function?

Answer 1

I just found it. Search for the genFx function in jQuery. You see it loops through arrays of styles and returns an object of the right styles, which eventually gets passed to the animate function internally. Just remove "opacity" from the array!

This also might work for you...

.animate({ width: "show" });

Answer 2

Use the animate function and simply vary the width and height. Here's a plugin that will do a reveal.

jQuery.fn.extend( {
    reveal: function() {
       return this.each( function() {
           var $this = $(this);
           $this.animate( { width: "show", height: "show" } );
       });
    }
}

Answer 3

jQuery's show slowly (show with a duration) does a slidedown and a fadein simultaneously. If all you want is the slidedown, just use the slidedown.

jQuery("#someElement").slideDown(700);

Not much more to say about that.