CODEWITHSUNDEEP
javascriptjquerycssjquery-uijquery-plugins
Jonovono
Jonovono

Reputation: 3425

Jquery slide to visibility hidden?

I want to achieve something like :

$("#left").hide('slide', {direction: 'right'}, 1000)

However I do not want the div to be hidden I want it to keep up space so I want have the visibility hidden like: 

$("#left").css('visibility','hidden')

Yet still achieve the same effect as above.

Upvotes: 3

Views: 8306

Answers (3)

leopic
leopic

Reputation: 3002

This is what I'd do

$parent = $('#left').parent(); //store the parent of the element in a variable
$('#left').clone() //clone the existing element
.appendTo($parent) // insert it into the current position
.css('visibility','hidden') //set it's visibility to hidden
.end().end() //target the initial element
.slideUp() //do any slide/hide/animation that you want here, the clone will always be there, just invisible

This could be horrible, but it's the only way I could think of solving the problem :)

Upvotes: 2

Skyrim
Skyrim

Reputation: 865

EXAMPLE: http://jsfiddle.net/skyrim/j2RWt/4

Try this:

var $content = $("#left");
var offset = $content.offset();
$("<div></div>").css({
    width: 0,
    position: "absolute",
    left: offset.left,
    top: offset.top,
    height: $content.outerHeight(),
    backgroundColor: "White"
}).appendTo("body")
.animate({
    width: $content.outerWidth()
}, 1000, function () {
    $content.css('visibility', 'hidden');
    $(this).remove();
});

EDIT

So, after learning what the actual need was (:p), this method basically place another div over the original element. I've tested it on IE...and I'll edit this with an update after I do further testing on other browsers!

EDIT

Only Chrome seems to be having an issue with getting the correct height.

Added a callback which removes the makes visibility hidden (as LEOPiC suggested) and removes the slideout div

Upvotes: 1

dku.rajkumar
dku.rajkumar

Reputation: 18568

You can do it in very simple way. There is really a nice tutorial here to animate in different direction. It will surely help you. try this

$('#left').animate({width: 'toggle'});

EXAMPLE : http://jsfiddle.net/2p3FK/2/

EDIT: One more solution, this is very simple to move the div out of window with left margin

$("#left").animate({marginLeft:'1000px'},'slow');

EXAMPLE : http://jsfiddle.net/2p3FK/1/

Upvotes: 0

Related Questions