Efecte jQuery

jQuery hide(), show() și toggle()

Cu jQuery, puteți ascunde și afișa elemente HTML cu ajutorul metodelor hide(), show() și toggle().

Sintaxa

$(selector).hide(viteza,[callback]);
$(selector).show(viteza,[callback]);
$(selector).toggle(viteza,[callback]);

Notă: parametrii din parantezele pătrate sunt opționali!

Exemplu

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
           $("p").hide();
  });
  $("#show").click(function(){
     $("p").show();
  });
});
</script>
</head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

Efecte de ștergere

Sintaxa

$(selector).fadeIn(viteza,[callback]);
$(selector).fadeOut(viteza,[callback]);
$(selector).fadeToggle(viteza,[callback]);
$(selector).fadeTo(viteza,opacitate,[callback]);

Efecte de alunecare

Sintaxa

$(selector).slideDown(viteza,[callback]);
$(selector).slideUp(viteza,[callback]);
$(selector).slideToggle(viteza,[callback]);

Efecte de animație

Sintaxa

$(selector).animate({params},viteza,callback);

Exemplu

$("button").click(function(){
$("div").animate({left: '250px'});
});
...

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

Metoda stop()

Metoda stop() este folosită pentru a opri execuția unui efect sau a unei animații înainte ca acesta/aceasta să se termine de executat.

$("#stop").click(function(){
    $("#panel").stop();
});

TODO: De adăugat la exemplul inițial, paragrafe noi care pentru un anumit eveniment, să apeleze efectele prezentate în această pagină.

Tema1.De creat o pagina in care 2 patrate se deplaseze pe orizontala, unul spre celalalt pornind din marginile opuse ale ecranului, iar cand ajung sa se suprapuna sa dispara de pe ecran.Se vor folosi functiile animate si hide.