.stop（）不阻止懸停動畫的建立

我爲使用masonry.js將圖像加載到網格中的客戶端創建了一個頁面。當您將鼠標懸停在圖片上時，標題會滑向上方，圖片會稍微放大。我遇到的問題是，當你直接加載頁面時，圖像經歷了非常緩慢的加載，並且縮放效果變得不穩定並且積累。你可以檢出頁面看看你是否有相同的效果？如果是這樣，我想知道它是否是圖像的大小？當我以正常速度離開頁面加載變焦效果時。.stop（）不阻止懸停動畫的建立

這裏是頁

http://elephantegin.eu1.frbit.net/elephant-people

的CSS：

.grid-item { 
    height: 180px; 
    width: 320px; 
    overflow: hidden; 
} 

.grid_zoom { 
    width: 105% !important; 
} 

.grid-item .grid_pic { 
    width: 100%; 
    height: auto; 
    transition-delay: 1s; /* delays for 1 second */ 
    -webkit-transition-delay: 1s; /* for Safari & Chrome */ 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
}

這裏是我使用的JavaScript。

$('.grid-item').hover(function() { 
    var $item = $(this); 
    var $img = $item.find('.grid_pic'); 
    var $callOut = $item.find('.grid_callout'); 

    $img.stop().toggleClass('grid_zoom'); 
    $callOut.stop().toggleClass('grid_slide_up'); 
});

來源

2015-11-26 Ricki Moore

爲什麼圖像這麼大？每個圖像6667x3750是矯枉過正的。你應該調整它們，看看有多大幫助。 –

的問題是圖像尺寸。我建議調整它們的大小以使包裝div（640x360）的尺寸加倍，所以它們在高分辨率顯示器上看起來很不錯。

注：呼籲jQuerys stop()在$img和$callOut元素的方法沒有任何效果。 stop()只會停止由jQuery觸發的動畫，例如animate()，或slideDown()，但它不會停止CSS轉換。但是，刪除mouseout上的grid_zoom和grid_slide_up類會在您將鼠標移出後自動反轉動畫。

來源

2015-11-27 03:41:55 tommy

.stop（）不阻止懸停動畫的建立

回答

相關問題