1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124
|
// Mon code mis en place pour l'animation des blocs en javacript.
$(document).ready(function() {
// Arrivé de bloc1
$("#bloc1").animate({"top": "20%"}, "slow");
// Hover sur l'élément one
$( "#one" ).hover(function(){
// entré
var queue = ($('#bloc2').queue('fx').length)+($('#bloc1').queue('fx').length);
for (var i=0;i<=queue;i++)
{
if(($('#bloc2').queue('fx').length == 0) && ($('#bloc1').queue('fx').length == 0)){
$('#bloc2').delay( 400 ).animate({
'right':'0%'
},
'slow');
$("#bloc1").animate({"top": "-=100%"}, "slow", function(){
$(this).css('top','100%');
});
}
}
},function(){
// sortie
$("#bloc1").animate({"top": "20%"}, "slow", function(){
$("#bloc1").clearQueue();
});
$('#bloc2').animate({
'right':'-50%'
},
'slow', function(){
$('#bloc2').clearQueue();
});
});
// Hover sur l'élément two
$( "#two" ).hover(function(){
// entré
var queue = ($('#bloc3').queue('fx').length)+($('#bloc1').queue('fx').length);
for (var i=0;i<=queue;i++)
{
if(($('#bloc3').queue('fx').length == 0) && ($('#bloc1').queue('fx').length == 0)){
$('#bloc3').delay( 400 ).animate({
'right':'0%'
},
'slow');
$("#bloc1").animate({"top": "-=100%"}, "slow", function(){
$(this).css('top','100%');
});
}
}
},function(){
// sortie
$("#bloc1").animate({"top": "20%"}, "slow", function(){
$("#bloc1").clearQueue();
});
$('#bloc3').animate({
'right':'-50%'
},
'slow', function(){
$('#bloc3').clearQueue();
});
});
// Hover sur l'élément three
$( "#three" ).hover(function(){
// entré
var queue = ($('#bloc4').queue('fx').length)+($('#bloc1').queue('fx').length);
for (var i=0;i<=queue;i++)
{
if(($('#bloc4').queue('fx').length == 0) && ($('#bloc1').queue('fx').length == 0)){
$('#bloc4').delay( 400 ).animate({
'right':'0%'
},
'slow');
$("#bloc1").animate({"top": "-=100%"}, "slow", function(){
$(this).css('top','100%');
});
}
}
},function(){
// sortie
$("#bloc1").animate({"top": "20%"}, "slow", function(){
$("#bloc1").clearQueue();
});
$('#bloc4').animate({
'right':'-50%'
},
'slow', function(){
$('#bloc4').clearQueue();
});
});
// Hover sur l'élément four
$( "#four" ).hover(function(){
// entré
var queue = ($('#bloc5').queue('fx').length)+($('#bloc1').queue('fx').length);
for (var i=0;i<=queue;i++)
{
if(($('#bloc5').queue('fx').length == 0) && ($('#bloc1').queue('fx').length == 0)){
$('#bloc5').delay( 400 ).animate({
'right':'0%'
},
'slow');
$("#bloc1").animate({"top": "-=100%"}, "slow", function(){
$(this).css('top','100%');
});
}
}
},function(){
// sortie
$("#bloc1").animate({"top": "20%"}, "slow", function(){
$("#bloc1").clearQueue();
});
$('#bloc5').animate({
'right':'-50%'
},
'slow', function(){
$('#bloc5').clearQueue();
});
});
}); |
Partager