图像调整大小Jquery [英] Image resizing Jquery

问题描述

我有4个图像的水平集。 resize函数适用于mouseover事件。这意味着如果我在这些图像上移动鼠标非常快或慢，它们将全部调整大小。因此，我需要用户将鼠标在给定图像上保持至少1.5秒，然后继续调整大小。这是不合适的代码：

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 );
        });

推荐答案

我会使用 .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 );
    });

这篇关于图像调整大小Jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！