在 img 上设置最大宽度动画 [JQuery]

Question

我尝试寻找解决方案，但找不到任何好的解决方案。

我正在为我的一个朋友定制一个博客。加载时，我希望每个帖子中的所有 img 的最大宽度和最大高度均为 150 像素。当用户推送 img 时，最大值应增加到 500px，这很容易。我的代码的问题是我无法获得我想要的动画。有什么帮助吗？

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

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

Answer 1

我得到了它的工作，结合了其他两个答案（并删除了 css 代码中的最大宽度和最大高度）

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/