Hide e show

.hide() e .show() sono due metodi di JQuery che consentono rispettivamente di cambiare la proprietà 'display' di un elemento del DOM a 'non' e di ripristinarla nel precedente stato.

Costruiamo ora un tipico read more

HTML code:

<div id="switcher">
<div class="label">Style Switcher</div>
<div class="button" id="switcher-large">
Increase Text Size</div>
<div class="button" id="switcher-small">
Decrease Text size</div> </div>
<div class="speech">
<p>Fourscore and seven years ago our fathers brought forth on
this continent a new nation, conceived in liberty, and dedicated
to the proposition that all men are created equal.
<span class="more">. . .</span></p>
<p>Now we are engaged in a great civil war, testing whether that
nation, or any nation so conceived and so dedicated, can long
endure. We are met on a great battlefield of that war. We have come
to dedicate a portion of that field as a final resting-place for
those who here gave their lives that the nation might live. It is
altogether fitting and proper that we should do this. But, in a
larger sense, we cannot dedicate, we cannot consecrate, we cannot
hallow, this ground.</p>
</div>

Javascript code

$(document).ready(function() {
  $('p:eq(1)').hide();  
  $('span.more').click(function() {
    $('p:eq(1)').show(); 
    $(this).hide();
  });
});

• $(document).ready(function() - gestore d'evento per il load della pagina
• $('p:eq(1)').hide(); - Nascondo il secondo p
• $('span.more').click(function() - gestore d'ebvento per il click su read more
• $('p:eq(1)').show(); - visualizzo il paragrafo

Inoltre questi due metodi accettano anche dei parametri che consentono di visualizzare un'animazione:

• show('fast') - hide('fast') varia opacità, larghezza e altezza alla velocità di .2 secondi
• show('normal') - hide('fast') varia opacità, larghezza e altezza alla velocità di .4 secondi
• show('normal') - hide('slow') varia opacità, larghezza e altezza alla velocità di .6 secondi
• Si può specificare anche il numero di millisecondi: show(850)

Risultato: Show hide sample

Hide e show sono gli unici metodi in JQuery che effettuano un'animazione su più proprietà

Se volessi fare un semplice fade potrei usare i metodi:

• fadeIn()
• fadeOut()

Per uno slide:

• slideUp()
• slideDown()