о 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> 

Но слишком сложно, я не могу писать ... так кто может мне помочь?

ИСТОЧНИК ЕГО ЗДЕСЬ: 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().