圖片放大的懸停和清除隊列

我遇到了以下問題，這幾乎是我需要的除了一件事。圖片放大的懸停和清除隊列

image enlarge on hover with content inside div box attached to image

最佳答案例如： http://demo.superdit.com/jquery/zoom_hover/

，當我在鼠標懸停和鼠標移開，然後幾次非常快，動畫繼續扮演了幾次之後方式的鼠標離開。

動畫在沒有參差不齊的情況下只能播放一次動畫嗎？

謝謝。

來源

2012-09-09 Shlomi Komemi

向我們展示了相關代碼。但我很確定它會[另一個關於'.stop（）']的問題（http://stackoverflow.com/a/11495892/417685） – Alexander

代碼就是這樣的例子：http：//demo.superdit .com/jquery/zoom_hover/ –

我希望[this]（http://jsfiddle.net/q7TX2/2/）能幫到你。在需要強制執行'.stop（）'事件時更改動畫。根據你當前頁面的樣式，它不會影響你[太多] – Alexander

以下是working code。

$(document).ready(function() { 
    var cont_left = $("#container").position().left; 
    $("a img").each(function() { 
    var $this = $(this); 
    var left = $this.position().left, top = $this.position().top; 
    $(this).hover(function() { 
     // hover in 
     $(this).parent().parent().css("z-index", 1); 
     $(this).stop().animate({ 
     height: "250", 
     width: "250", 
     left: left - 50, 
     top: top - 50 
     }, "fast"); 
    }, function() { 
     // hover out 
     $(this).parent().parent().css("z-index", 0); 
     $(this).stop().animate({ 
     height: "150", 
     width: "150", 
     left: left, 
     top: top 
     }, "fast"); 
    }); 
    }); 

    $(".img").each(function(index) { 
    var left = (index * 160) + cont_left; 
    $(this).css("left", left + "px"); 
    }); 
});

所做的更改：

新增.stop()。
動畫的固定位置，使其與.stop()迫使（使其停止的。）

來源

2012-09-09 20:55:04 Alexander

圖片放大的懸停和清除隊列

回答

相關問題