Animations : ne se terminent pas avant que les autres ne commencent
Bonjours à tous et toutes,
Je n'arrive pas à réaliser exactement l'effet que je désire.
Je vais essayer de m'expliquer le plus clairement possible.
J'ai 4 liens et lorsque je survole un des liens, une animation se joue (juste en dessous) pour faire apparaître le titre du lien.
Le soucis est que lorsque l'on va trop vite avec la souris sur un autre lien, l'animation ne se joue plus correctement et fait ceci :
-Le texte à l'intérieur du rectangle noir est remplacer par celui de l'autre lien survolé sans rejouer l'animation du ce rectangle depuis le départ.
Je vais vous fournir le lien de ma page en ligne :
Ma page test
Ainsi que le code :
Code:
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
| <html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>animate box</title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.hoverflow.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$("ul.works_title li").hide();
$(".links_works").mouseenter(function(e) {
var target = $(this).attr('rel');
$('#'+target).hoverFlow(e.type, {'opacity': 'show'});
$("#box_resultat").hoverFlow(e.type, { width: "500" }, 500 );
});
$(".links_works").mouseleave(function(e) {
var target = $(this).attr('rel');
$('#'+target).hoverFlow(e.type, {'opacity': 'hide'});
$("#box_resultat").hoverFlow(e.type, { width: "0" }, 500 );
});
});
</script>
<style type="text/css" media="screen">
div#works{
overflow:auto;
}
.links_works{
text-decoration: none;
display: block;
width:50px;
height:50px;
border:1px solid grey;
float:left;
margin-left:20px;
}
#box_resultat {
background: black;
height: 100px;
width: 0px;
position: absolute;
}
ul.works_title li {
position:absolute;
top:10px;
text-transform: uppercase;
list-style: none;
width:500px;
font-size:70px;
color:white;
}
</style>
</head>
<body>
<div id="works">
<a class="links_works" href="" rel="1">1</a>
<a class="links_works" href="" rel="2">2</a>
<a class="links_works" href="" rel="3">3</a>
<a class="links_works" href="" rel="4">4</a>
<a class="links_works" href="" rel="5">5</a>
</div>
<div id="box_resultat">
<ul class="works_title">
<li id="1">Travail N°1</li>
<li id="2">Travail N°2</li>
<li id="3">Travail N°3</li>
<li id="4">Travail N°4</li>
<li id="5">Travail N°5</li>
</ul>
</div>
</body>
</html> |
Voilà j'espère que l'un de vous saura me débloquer.
Merci par avance.
