JQUERY change src image avec fadein() fadeout()

Bonjour à tous,

J'ai un script qui change mes image au survol

$(".product_image").hover(
function () {
	$imgURL = $(this).find('.img_first').attr("data-original-b");
	$(this).find('.img_first').attr('src',$imgURL);
}
,
function () {
	$imgURL = $(this).find('.img_first').attr("data-original-b");
	$(this).find('.img_first').attr('src',$imgURL);
}
);

Maintenant j'aimerai améliorer mon code pour ajouter un effet un peu plus jolie.

J'ai donc fait:

$(".product_image").hover(
function () {
	$imgURL = $(this).find('.img_first').attr("data-original-b");
	$(this).find('.img_first').fadeOut(1000,function() {
	    $(this).find('.img_first').attr('src',$imgURL)
	  }).fadeIn(1000);
	
}
,
function () {
	$imgURL = $(this).find('.img_first').attr("data-original");
	$(this).find('.img_first').fadeOut(1000,function() {
	    $(this).find('.img_first').attr('src',$imgURL)
	  }).fadeIn(1000);
	
}
);

En m'inspirantr de ce cdoe: http://jsfiddle.net/HpmN7/

Mais ca ne fonctionne pas. ca clignote une fois mais l'image ne se change pas. auriez ovus une idee pourquoi?

J'ai réussit

<a href="http://127.0.0.1/a.html" class="product_image_v2">
	<img
	 class="img_first lazy" id="v2"
	 src=""
	  data-original="http://127.0.0.1/a.gif"
	  data-original-b="http://127.0.0.1/b.gif"
	   />
</a>
<hr>
<script type="text/javascript">
$(".product_image_v2").hover(
	function () {
		$(this).find('.img_first').fadeOut(300, function() {
        $(this).attr("src",$(this).attr("data-original-b")).delay(300);
	    }).fadeIn(300);
	    return false;		
	}
	,
	function() {
		$(this).find('.img_first').fadeOut(300, function() {
        $(this).attr("src",$(this).attr("data-original")).delay(300);
	    }).fadeIn(300);
	    return false;
	}
);

		</script>

En revanche,
Si je passe rapidement de maniere répétitive, la souris dessus, plus dessus... l'effet se repete

Comment serait il possible d'éviter cela?
Modifié par gotcha5832 (27 Apr 2014 - 09:35)

Afin d'éviter la répétion j'ai rajouter un Stop()

$(".product_image").hover(
	function () {
		$(this).find('.img_first').stop().fadeOut(300, function() {
	$(this).delay(100).attr("src",$(this).attr("data-original-b")).delay(100);
	    }).fadeIn(300);
	    return false;		
	}
	,
	function() {
		$(this).find('.img_first').stop().fadeOut(300, function() {
	$(this).delay(100).attr("src",$(this).attr("data-original")).delay(100);
	    }).fadeIn(300);
	    return false;
	}
);

Ce qui semble mieux mais pas parfait.


En revanche l'effet n'est pas "Smooth."
A l'oeil ca donne l'impresion:
1 - Fadeout mais pas jusqu'a la fin
2 - changement brusque de l'image
3- Pause
4- fadein

Auriez vous un idée pour rendr cela plus smooth?