关于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()。