Question

I have horizontal set of 4 images. The resize function works on mouseover event. This means that if I move the mouse very fast or slow over these images they will All resize. Because of this I need the user to keep the mouse over for at least 1.5 sec over a given image and then proceed with the resize. This is the unproper code:

$('a img').mouseover(function(){
            $(this).delay(1500).animate({
                width: "315px",
                height: "225px",
                marginLeft: "-50px"
            }, 1500 );
        });
        $('a img').mouseout(function(){
        $(this).animate({
            width: "210px",
            height: "150px",
            marginTop: "0px",
            marginLeft: "0px"
        }, 500 );
        });

Answer 1

I would use .setTimeout()

$('a img').mouseover(function(){
        var imgElement = $(this);
        var timeoutID = window.setTimeout(
        function(){ 
            imgElement.animate({
                width: "315px",
                height: "225px",
                marginLeft: "-50px"
            }, 1500 );
         }, 1500);
         imgElement.data("timeout", timeoutID);
    });
    $('a img').mouseout(function(){
        var imgElement = $(this);
        var timeoutID = imgElement.data("timeout");
        window.clearTimeout(timeoutID);
        $(this).animate({
            width: "210px",
            height: "150px",
            marginTop: "0px",
            marginLeft: "0px"
        }, 500 );
    });