[UI] Animate() qui s'effectue en boucle

Bonjour à tous,

Je dois actuellement faire afficher une petite bande noire avec un titre qui vient en superposition d'une div lorsqu'on survole celle-ci.

J'ai bien réussi à faire cette animation. Mais le problème est que lorsque l'utilisateur va sur cette fameuse bande noire (pour cliquer puisqu'il y a un lien) l'animation de mon "mouseOut" se lance, puis celle de mon "mouseOver" et ainsi de suite.

Voici mon code pour que vous compreniez:

HTML

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
 
<div id="main-news">
		<div class="news">
			<div class="news-img">
 
				<img src="./upload/actu01.png" alt="" />
				<div>
					<p>Actu</p>
				</div>
			</div>
			<p class="news-text">
				Tempore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, dissidentes, quarum si altera defuisset, ad perfectam non venerat summitate [...]
			</p>
		</div>
 
		<div class="news">
			<div class="news-img">
 
				<img src="./upload/actu01.png" alt="" />
				<div>
					<p>Actu</p>
				</div>
			</div>
			<p class="news-text">
				Tempore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, dissidentes, quarum si altera defuisset, ad perfectam non venerat summitate [...]
			</p>
		</div>
 
		<div class="news">
			<div class="news-img">
 
				<img src="./upload/actu01.png" alt="" />
				<div>
					<p>Actu</p>
				</div>
			</div>
			<p class="news-text">
				Tempore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, dissidentes, quarum si altera defuisset, ad perfectam non venerat summitate [...]
			</p>
		</div>
 
		<div class="news">
			<div class="news-img">
 
				<img src="./upload/actu01.png" alt="" />
				<div>
					<p>Actu</p>
				</div>
			</div>
			<p class="news-text">
				Tempore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, dissidentes, quarum si altera defuisset, ad perfectam non venerat summitate [...]
			</p>
		</div>
	</div>

CSS

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
 
#main-news
{
	width:1280px;
	height:234px;
	margin:auto;
	background-image:url(./../img/bg-actu.png);
}
 
.news
{
	width:313px;
	height:184px;
	margin-top:15px;
	float:left;
	margin-left:7px;
}
 
.news-img
{
	width:313px;
	height:123px;
	overflow:hidden;
 
}
 
.news-img img
{/*
	position:absolute;*/
	z-index:0;
}
 
.news-img div
{/*
	position:absolute;*/
	width:313px;
	background-color:#000;
	color:#fff;
	z-index:2;
	text-align:right;
	font-size:15pt;
	opacity:0.75;/*
	bottom:-86px;
	/*display:none;*/
}
 
.news-text
{
	font-size:11pt;
	width:280px;
	height:80px;
	color:black;
	text-align:justify;
	text-indent:10px;
	margin:auto;
padding-right:10px;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
$(document).ready(function()
	{
 
		$('.news-img').mouseover(function(){
			$(this).find("div").animate({"margin-top": "-25px"}, 300);
			return false;
		});
 
		$('.news-img').mouseout(function(){
			$(this).find("div").animate({"margin-top": "25px"}, 300);
			return false;
		});
 
	});

Si vous pouviez m'éclairer là dessus.

Je vous remercie ! :)