Question

I want to create two new methods for jQuery that makes appear and disappear objects.
I dont want to use the jQuery methods show() and hide() (neither fadeIn() or fadeOut()) because :

• the effect is not gradual
• when a div hides, then the object is not present anymore in the page and all the other div move.

My code does not work : objects disappear but don’t appear.

Any clue ?

jQuery.fn.disappear = function() {
    this.fadeTo('slow', 0, function() {
    this.css('visibility', 'hidden');
});
};

and

jQuery.fn.appear = function() {
     this.css('visibility', 'visible');
     this.fadeTo('slow', 1);
};

Answer 1

When ‘this’ is used in a custom jQuery function, it’s value is a jQuery object. When ‘this’ is used inside a callback function it’s a DOM object.

The correct code is:

jQuery.fn.disappear = function() {
    this.fadeTo('slow', 0, function() {
    jQuery(this).css('visibility', 'hidden');
});
};

and

jQuery.fn.appear = function() {
     this.css('visibility', 'visible');
     this.fadeTo('slow', 1);
};