CODEWITHSUNDEEP
jqueryjquery-animatehide
angela
angela

Reputation: 71

Using jQuery (and perhaps CSS), how do I hide an element without collapse and animation?

The following is the desired span which will be hidden

<span class="lastSave" name="lastSave">Last Saved by <i name="lastSavedBy"></i> at <i name="lastSaved"></i> </span>

There is a table below this in the page.

The following is the relevant functions in the javascript invoked at some event. Note that this one makes the table move up.

function hideLastSaved(form){
    jQuery(' [name="lastSave"]').hide();
}

function showLastSaved(form){
    jQuery(' [name="lastSave"]').show();
}

In replace of the above snippets in the javascript, I tried the following. This does not make the table move up. But this one has some kind of fading out which is not desired in my application.

function hideLastSaved(form){
    jQuery(' [name="lastSave"]').animate({opacity:0});
}

function showLastSaved(form){
    jQuery(' [name="lastSave"]').animate({opacity:100});
}

Upvotes: 1

Views: 4240

Answers (7)

user2558741
user2558741

Reputation: 21

If you are using the older versions of JQuery then use the following:

function hideLastSaved(form){
jQuery(' [name="lastSave"]').fadeOut(1);
}

function showLastSaved(form){
jQuery(' [name="lastSave"]').fadeIn(1);
}

The "1" simply sets a time scale of 1 millisecond which is technically nothing and if you are using the newer versions of JQuery then just add $ instead of JQuery:

function hideLastSaved(form){
$('[name="lastSave"]').fadeOut(1);
}

function showLastSaved(form){
$('[name="lastSave"]').fadeIn(1);
}

Upvotes: 0

daveyfaherty
daveyfaherty

Reputation: 4613

Another way:

function hideLastSaved(form){
    jQuery(' [name="lastSave"]').css('display','none');
}

function showLastSaved(form){
    jQuery(' [name="lastSave"]').css('display','block');
}

jQuery hide() = set display: none and visibility: hidden, with a transition

jQuery show() = set display: block and visibility: visible, with a transition

Upvotes: 0

angela
angela

Reputation: 71

Well I wanted everything else to stay in place, so the .hide() in jQuery didn't work because this is equivalent to adding the following class in CSS

.hide{
display: none
}

Also, I didn't want any form of animation so the .animate() and changing the opacity from 0 to 1 isn't what I am looking for. I have tried it and I can see the element fade out. I want it to disappear instantly without all the others in the page move.

I decided to use the .css( propertyName, value ) 

function hideLastSaved(form){
    jQuery(' [name="lastSave"]').css('visibility','hidden');
}

function showLastSaved(form){
    jQuery(' [name="lastSave"]').css('visibility','visible');
}

which is the shorter way of adding a class like this one:

.hider{
visibility: hidden
}

to the element using

function hideLastSaved(form){
    $(' [name="lastSave"]').addClass('hider');
}

function showLastSaved(form){
    $(' [name="lastSave"]').removeClass('hider');
}

similar to what Jamie Dixon suggests.

I have not tried what Nightw0rk suggests:

function hideLastSaved(){
    jQuery(' [name="lastSave"]').css('opacity','0');
}

function showLastSaved(){
    jQuery(' [name="lastSave"]').css('opacity','1');
}

but will try it just so I know how it looks like.

Thank you all very much for your brilliant suggestions!

Upvotes: 6

Nachshon Schwartz
Nachshon Schwartz

Reputation: 15765

Use the following code to change the visibility of the span:

$('#uniqueSpanId').animate({opacity: 0.0});

This will change the opacity of a span with uniqueSpanId to 0 making it invisible. Changing it back from that is simple doing the opposite command:

$('#uniqueSpanId').animate({opacity: 1.0});

Upvotes: 0

Nightw0rk
Nightw0rk

Reputation: 419

function hideLastSaved(){
    jQuery(' [name="lastSave"]').css('opacity','0');
}

function showLastSaved(){
    jQuery(' [name="lastSave"]').css('opacity','1');
}

Upvotes: 0

Sleeperson
Sleeperson

Reputation: 612

Try changinging the css visible property.

Upvotes: 2

Jamie Dixon
Jamie Dixon

Reputation: 53991

The hide method changes the display property of the element to none.

If you want to keep the elements position whilst hidding it, add a class that sets visibility to hidden.

CSS:

.hider{
   visibility:hidden;
}

JS

function hideLastSaved(form){
    $(' [name="lastSave"]').addClass('hider');
}

function showLastSaved(form){
    $(' [name="lastSave"]').removeClass('hider');
}

Here's a very basic demo: http://jsfiddle.net/dWw7F/

Upvotes: 2

Related Questions