Question

我有4个图像的水平集。 resize函数适用于mouseover事件。这意味着如果我在这些图像上移动鼠标非常快或慢，它们将全部调整大小。因此，我需要用户将鼠标在给定图像上保持至少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

我不确定你想要的确切逻辑，但这是一种方法。我没有联系到实际的动画，而只是告诉你何时会触发它。

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/

Answer 3

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

3 个答案: