關於jQuery的圖像縮放效果

Question

我有一些縮略圖下面的代碼：

<img onclick="if($(this).hasClass('zoom'{ 
     this.src='http://24.media.tumblr.com/tumblr_m2uql6rJsI1r9fv99o1_100.gif'; 
     $(this).animate({'width':'100','height':'50'}).removeClass('zoom') 
    }else{ 
     this.src='http://27.media.tumblr.com/tumblr_m2uql6rJsI1r9fv99o1_500.gif'; 
     $(this).animate({'width':'500','height':'268'}).addClass('zoom') 
    }" 
    style="width: 100px; height: 50px;" 
    src="http://24.media.tumblr.com/tumblr_m2uql6rJsI1r9fv99o1_100.gif" > 

它的工作原理，但我不希望這種風格，我的網站，我想是這樣的：

<script type="text/javascript">#$^%@^&*$#$^#@%</script> 

但太複雜了，我不能寫......所以誰能幫助我？

SOURCE在這裏：http://jsfiddle.net/My39T/

的另一個問題是，我需要動畫，所以這些圖像需要的寬度/高度。我能做到這一點，但我沒有圖像寬度/高度，所以也許需要這樣的：

$('img').each(function() { 
$(this).attr('height',$(this).height()); 
$(this).attr('width',$(this).width()); 
}); 

Answer 1

我想這你想要做什麼，而是因爲你沒有清楚地說明你想什麼發生，這是基於閱讀在線onclick處理程序的最佳猜測。

$(function() { 
    $(".thumb > li > a").click(function() { 
     var that = $(this), 
      img = that.find('img'), 
      src = that.href, 
      h = img.height(), 
      w = img.width(); 

     img.attr({ 
      'height' : h, 
      'width' : w, 
      'src' : src 
     }); 
     if (that.hasClass('zoom')){ 
      img.animate(
       { 
        'height' : 67, 
        'width' : 100 
       },1000); 
     } 
     else { 
      img.animate(
       { 
        'height' : 268, 
        'width' : 500 
       },1000); 
     } 
     that.toggleClass('zoom'); 
     return false; 
    }); 
});​ 

JS Fiddle demo。

• animate()。
• attr()。
• click()。
• find()。
• hasClass()。
• height()。
• toggleClass()。
• width()。