imgの最大幅をアニメ化する[JQuery]

Question

私は解決策を探してみましたが、良いものは見つかりませんでした。

私は友人のブログをカスタマイズしています。それが読み込まれると、各投稿のすべてのimgの最大幅と最大高さが150pxになるようにします。ユーザーがimgを押すと、最大値は500pxに増加するはずです。これは簡単です。私のコードの問題は、私が望むアニメーションを得ることができないということです。そこに助けがありますか？代わりに.css()を使用しての

var cssObj = {'max-width' : '500px','max-height' : '500px;'} 

$("img").click(function(){  
    $(this).css(cssObj); 
}); 

Answer 1

、あなたはすでにあなたがtoggleClassメソッドを使用することができ、CSSクラスを使用しているので.animate()

var cssObj = {'max-width' : '500px','max-height' : '500px;'} 

$("img").click(function(){  
    $(this).animate(cssObj,'slow'); 
}); 

Answer 2

$(document).ready(function() 
{ 
    // define sizes 
    var cssBegin = { width: 150, height: 150 }; 
    var cssMax = { width: 500, height: 500 }; 

    // init images with the small size 
    $('img').css(cssBegin); 

    // init click event on all images 
    $("img").click(function(){ 
     $(this).animate(cssMax, 'fast'); 
    }); 
}); 

Answer 3

を使用してみてください - それが存在しない場合、指定されたクラスを追加し、オプションのトランジションを使用して、指定されたクラスが存在する場合はそのクラスを削除します。

$("img").click(function() { 
     $(this).toggleClass("cssObj", 1000); 
     return false; 
    }); 

ここでのデモを参照してください - http://jqueryui.com/demos/toggleClass/

Answer 4

を、私はそれが他の回答のうちの2つを組み合わせることで、作業（およびCSSコードのmax-幅&最大高さを取り除く）しまった

var cssBegin = {'max-width' : '250px','max-height' : '250px;'};  
$('img').css(cssBegin);  
var cssObj = {'max-width' : '500px','max-height' : '500px;'}; 
$("img").click(function(){   $(this).animate(cssObj,'slow'); });