Les bases de jquery
Évènements:
Liste
ici dans évènements
Quelques exemples liés aux évènements:
Évènement mouseenter(à l'inverse de mouseleave)
Ici toogle permet de faire le switch entre hide et show.
- Passer le souris sur p_a1
html : div id="p_a1" - jquery : $('#p_a1').mouseenter(function(){$('#p_a2').toggle(1500);});
div id="p_a2"
Évènement click
- Cliquer sur p_b1
html : div id="p_b1" - jquery : $('#p_b1').click(function(){$('#p_b2').toggle('fast');});
div id="p_b2"
Évènement hover
- Passer le souris sur p_d1
$('#p_d1').hover(function(){
$('#p_d2').hide('slow');
},
function(){
$('#p_d2').show();
});
Évènement avec mouseenter et mouseleave
- Passer le souris sur p_c1
$('#p_c1').mouseenter(function(){
$('#p_c2').hide('slow', function(){
$('#p_c2').hide('slow', function(){
$('#p_c1').mouseleave(function(){
$('#p_c2').show('slow');
});
});
});
});
Quelques exemples liés aux effets:
Évènement avec calleback: on(click, function(){});
Permet de lancer une action lorsqu'une autre est finie
- Cliquer sur p_1
id="p1"
id="p2"
id="p3"
id="p4"
id="p5"
$('#p1').on('click', function(){
$('#p5').toggle('slow', function(){
$('#p4').toggle('slow', function(){
$('#p3').toggle('slow', function(){
$('#p2').toggle('slow');
});
});
});
});
Évènement on({objet}); avec des effets: fadeOut, fadeIn, fadeToggle
- Passer et/ou cliquer sur p_1
id="p_e1"
id="p_e2"
id="p_e3"
id="p_e4"
id="p_e5"
$('#p_e1').on({
mouseenter: function(){
$('#p_e5').fadeOut(4000);
},
mouseleave: function(){
$('#p_e5').fadeIn(4000);
},
click: function(){
$('#p_e4').fadeToggle(3000, function(){
$('#p_e2').fadeTo(2000, 0.6);
});
}
});
Effet slideUp
Cliquer ici
class="p_f1"
class="p_f1"
class="p_f1"
class="p_f1"
class="p_f1"
$('#carreClic').click(function() {
if($(".p_f1").first().is(":hidden")){
$(".p_f1").show("slow");
}else{
$(".p_f1").slideUp("slow");
}
});
Effet slideDown
Cliquer ici
class="p_f2"
class="p_f2"
class="p_f2"
class="p_f2"
class="p_f2"
$('#carreClicDown').click(function() {
if($(".p_f2").first().is(":hidden")){
$(".p_f2").slideDown("slow");
}else{
$(".p_f2").hide("slow");
}
});
Effet slideToggle
Cliquer ici
class="p_f3"
class="p_f3"
class="p_f3"
class="p_f3"
class="p_f3"
$('#carreClicToggle').click(function() {
$(".p_f3").slideToggle(2000);
});
Animation
$('#right').click(function(){
$('#animCarre').animate({
opacity: 0,
width: '0px',
height: '0px'
}, 2000, function() {
$('#animCarre').animate({
opacity: 0.9,
width: '+=300px',
height: '+=300px'
}, 3000);
});
});
$('#stopUn').click(function(){
$('#animCarre').stop(true);
});
$('#stopDeux').click(function(){
$('#animCarre').stop(true, true);
});
Animation chaînées
$('#clic').click(function(){
$('#animCarreDeux').slideUp(2000).slideDown(2000).fadeOut(2000).fadeIn(2000);
});
script src="jquery-3.6.0.min.js" script
script src="script.js" script