懸停時'jQuery'展開'和'合同'圖像 - '合同'失敗

我的目標是在鼠標懸停時將圖像製作爲新維度的動畫，並臨時添加一個新的css類，並將其返回到原始圖像在鼠標移出時尺寸（並刪除添加的類）。懸停時'jQuery'展開'和'合同'圖像 - '合同'失敗

我的代碼在鼠標懸停時工作正常。在鼠標移出時，添加的類將被刪除，但圖像尺寸不會恢復到原始寬度和高度。

HTML：

<img src='img.jpg' alt='' class='pulse'>

的jQuery：

$(function() { 
    // set global img width and height 
    var width_pulse_img = 0; 
    var height_pulse_img = 0; 
    $('img.pulse').hover(function() { 
    // onMouseOver: read original width and height on FIRST mouseover 
    if (!width_pulse_img) width_pulse_img = $(this).css('width'); 
    if (!height_pulse_img) height_pulse_img = $(this).css('height'); 
    // set img expansion ratio and compute new dimensions 
    var float_exp = 1 + 0.1; 
    var ww = (float_exp*parseInt(width_pulse_img, 10)).toString(); 
    var hh = (float_exp*parseInt(height_pulse_img, 10)).toString(); 
    // animate to new dimensions 
    $(this).addClass('hover').stop().animate({ 
     width: ww + 'px', 
     height: hh + 'px' 
    }, 200); 
    }, function() { 
    // onMouseOut: animate back to original dimensions: 
    $(this).removeClass('hover').stop().animate({ 
     // THIS IS THE PART THAT DOES NOT WORK 
     width: width_pulse_img + 'px', 
     height: height_pulse_img + 'px' 
    }, 400); 
    }); 
});

我已經測試在Firefox 12.0，Chrome和IE 9.0和行爲是相同的。

這是一個jsFiddle顯示問題。任何幫助將不勝感激。

來源

2012-06-23 Stefan

檢查這個http://jsfiddle.net/joycse06/z6zvg/1/，使用'.WIDTH（）'和'.height（）'代替'.css（...'做的竅門。 –

@Joy：太好了，謝謝。仍然不明白爲什麼它會失敗。無論如何，請發表您的評論作爲答案，我會將其標記爲已接受。 – Stefan

檢查我的更新答案，找出爲什麼你的失敗。 –

使用.width()和.height()而不是.css(..)有竅門。因此，使用它就像

width_pulse_img = $(this).width(); 
height_pulse_img = $(this).height();

它會正常工作。

演示：http://jsfiddle.net/joycse06/z6zvg/1/

而關於失敗的原因我現在還不能確定爲什麼這正在發生。但在使用.css()時，它始終保留width and height中的更改。

更新：後面

原因作爲文檔在.width()

說的CSS（寬度）和.WIDTH（）之間的區別是，後者返回一個無單位的像素值（例如400），而前者返回值爲且單位完好（例如400px）。

所以這兩條線

width_pulse_img = $(this).css('width'); // 220px 
height_pulse_img = $(this).css('height'); // 237px

的第一次分配後，所以他們有px已經爲您使用.css(。

他們後，當你使用

width: width_pulse_img + 'px', // becoming 220pxpx 
    height: height_pulse_img + 'px' // 237pxpx

因此它忽略了整個事情，而不是收縮圖像。但正如你已經使用parseIntexpanding工作正常。

工作版本使用的.css（）：http://jsfiddle.net/joycse06/z6zvg/4/

來源

2012-06-23 10:25:26

太棒了！神祕解決 - 非常感謝你。 – Stefan

懸停時'jQuery'展開'和'合同'圖像 - '合同'失敗

回答

相關問題