jquery中的圖像放大/縮小效果問題

Question

我有應用程序，其中圖像獲得放大和縮小焦點和模糊。現在的問題是，我有焦點在第一行的單元格（行由4個單元格組成），並將焦點移動到行的最後一個單元格（使用箭頭鍵），第一個和最後一個單元格之間的2個單元格變小。如果我在幾次迭代後都做同樣的事情，那麼第一個和最後一個單元格之間的圖像就會消失。

因爲在我的應用程序中每個圖像都有diffrernt大小，我不能直接傳遞值。

是可以讀取每個圖像大小，並將包含圖像大小的變量傳遞給模糊函數而不是執行++ 15px/- = 15px。

代碼片段/演示將非常有幫助。

這是我的演示。看看請幫忙。 demo

Answer 1

您可以例如使用jQuery的data()方法來存儲圖像的原始大小，並將其用於focus和blur事件處理程序。像這樣：

// cache size 
$('button img').each(function(i, img) { 
    $(img).data('size', { 
     'width': $(img).width(), 
     'height': $(img).height(), 
    }); 
}); 

// on focus 
$('button:has(img)').focus(function() { 
    var $image = $(this).find('img'), 
     size = $image.data('size'); 
    $image.stop().animate({ 
     'width': (size.width + 15) +'px', 
     'height': (size.height + 15) +'px', 
    }, 500); 
}); 

// on blur 
$('button:has(img)').blur(function() { 
    var $image = $(this).find('img'), 
     size = $image.data('size'); 
    $image.stop().animate({ 
     'width': size.width +'px', 
     'height': size.height +'px', 
    }, 1); 
}); 

這裏的your demo edited，我想它應該是這樣工作的吧？我已經刪除了超時值，並使用stop()代替，因爲這就是您想要超時實現的目標嗎？