[RESOLUT] Action si la souris est hover un certain delay

Bonjour à tous.

Voilà j'ai un script qui retourne mes images qu survol.
le souci étant que si on passe bouge la souris rapidement à travers la page on se retrouve avec X images qui se retournent.
Du coup je soiuhaiterais modifier mon script pour que l'image se retroune que si la souris est dessus pendant 1/2 seconde.
J'ai essayer avec timeout genre, mais cela ne fonctionne pas.
L'action du mousehover s'execute au hover off???

var timeout;
$(someel).hover(
    function() {
        timeout = setTimeout(function(){
            // do stuff on hover
        }, 2000);
    },
    function(){
        clearTimeout(timeout);
        // do stuff when hover off
    }
);

voici mon code:

var flipped;
	var delay=1000, setTimeoutConst;
	if(window.innerWidth > 799){ 
		$(".product_image").hover(
	        function () {
	        	console.log("a");
	        	setTimeoutConst = setTimeout(function(){
	        		
					//Si l'attrib. data-original n'existe pas on le crée
					if (!$(this).find('.img_first').data("original"))
						$(this).find('.img_first').data("original", $(this).find('.img_first').attr("src"));
					//on preload l'image
					preload([$(this).find('.img_first').data("original-b")]);
					//on anime
		            	$(this).find('.img_first')
		                .animate( { "deg" : "+=90" }, {
		                    "duration" : 400,
		                    "step" : function( now ){
		                        $( this ).css( "transform", "rotatey(" + now + "deg)" );
		                    },
		                    "complete" : function(){
		                        $( this )
		                            .attr( "src", $( this ).data( "original-b" ) )
		                            .animate( { "deg" : "+=90" }, {
		                                "duration" : 400,
		                                "step" : function( now ){
		                                    $( this ).css( "transform", "rotatey(" + now + "deg)" );
		                                }
		                            });
		                    }
		                });
		                flipped=1;
		                console.log("flipped");
		                console.log(flipped);
		        }, delay);
	        },
	        function () {
	        	clearTimeout(setTimeoutConst);
	        	if(flipped == 1){
		            $(this).find('.img_first')
		                .animate( { "deg" : "-=90" }, {
		                    "duration" : 150,
		                    "step" : function( now, fx ){
		                        $( this ).css( "transform", "rotatey(" + now + "deg)" );
		                    },
		                    "complete" : function(){
		                        $( this )
		                            .attr( "src", $( this ).data( "original" ) )
		                            .animate( { "deg" : "-=90" }, {
		                                "duration" : 150,
		                                "step" : function( now, fx ){
		                                    $( this ).css( "transform", "rotatey(" + now + "deg)" );
		                                }
		                            });
		                    }
		                });
	            }
	            flipped=0;
	        }
		);
	}

Le problème étant qu'à partir du moment ou je rajoute:
setTimeoutConst = setTimeout(function(){

le script n'arrive plus à cibler le $(this)

Edit:

$(".product_image").hover(
	        function () {
	        	monelement = $(this);

Modifié par gotcha5832 (20 Sep 2014 - 15:59)