img 上的动画最大宽度

我试过找一个解决方案，但找不到任何好的东西。

我正在为我的一个朋友定制一个博客。 当它加载时，我希望每个post中的所有img都具有150px的最大宽度和最大高度。 当用户按下img时，max-values应该增加到500px，这很容易。 我的代码的问题是我无法在其上获得动画，这是我想要的。 有帮助吗？

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

Answer 1

我得到它的工作，结合其他两个答案（并删除css代码中的max-width和max-height）

 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'); }); 

Answer 2

而不是使用.css() ，尝试使用.animate()

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

Answer 3

 $(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 4

由于您已经在使用CSS类，因此可以使用toggleClass方法 – 添加指定的类（如果不存在），并使用可选的转换删除指定的类（如果存在）。

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

请参阅此处的演示 – http://jqueryui.com/demos/toggleClass/