Jquery 调整图像大小

Question

我有 4 张水平图像。调整大小功能适用于鼠标悬停事件。这意味着如果我在这些图像上快速或缓慢地移动鼠标，它们都会调整大小。因此，我需要用户将鼠标悬停在给定图像上至少 1.5 秒，然后继续调整大小。这是不正确的代码：

$('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

您可以使用 setTimeout 和clearTimeout 来实现此目的：

.hover() 也是 jQuery 中处理的快捷方法mouseOver 和 mouseOut 同时出现。

var TimeoutHandler = 0;
var ImageToAnimate = null;

function AnimationIn()
{
    // animate ImageToAnimate 
}

function AnimationOut(image)
{
    // animate image
}

$('a img').hover(function()
{
     clearTimeout(TimeoutHandler );
     ImageToAnimate = this;
     TimeoutHandler = setTimeout(AnimationIn, 1500);
}, function()
{
     AnimationOut(this);
});

Answer 2

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

Answer 3

我不确定您想要的确切逻辑，但这是一种方法。我没有连接实际的动画，只是向您展示它何时触发。

HTML：

<div class="container">
<img src="http://photos.smugmug.com/photos/227688911_f5X9o-Ti.jpg" border="0">
<img src="http://photos.smugmug.com/photos/231469043_zkRUp-Ti.jpg" border="0">
<img src="http://photos.smugmug.com/photos/227688911_f5X9o-Ti.jpg" border="0">
<img src="http://photos.smugmug.com/photos/231469043_zkRUp-Ti.jpg" border="0">
<img src="http://photos.smugmug.com/photos/227688911_f5X9o-Ti.jpg" border="0">
</div>
<div id="result">
</div>

JS：

(function() {

    var myTimer = null;

    function animate() {
        $("#result").append("go, ");
    }

    $(".container").mouseenter(function() {
        if (!myTimer) {
            myTimer = setTimeout(function() {
                myTimer = null;
                animate();
            }, 1500);
        }
    });
    $(".container").mouseleave(function(){
        if (myTimer) {
            clearTimeout(myTimer);
            myTimer = null;
        }
    });
}());

通过在触发动画之前检查鼠标是否仍在图像上，可以使这一点更加简单，以防万一 mouseleave 事件以某种方式错过。

您可以在这里看到它的实际效果： http://jsfiddle.net/jfriend00/9q36R/