img [JQuery] 上的动画最大宽度答案

【问题标题】：Animate max-width on img [JQuery]img [JQuery] 上的动画最大宽度
【发布时间】：2011-02-04 18:34:48
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript jquery image animation resize

【解决方案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');  });

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

很好，动画正在运行，但最大尺寸出现错误...最大宽度约为 340，高度约为 275...奇怪！
我会检查您的边距/填充以解决 160 像素的损失
@Øyvind：另外，图片实际上有多大？
不，有些低于，但其他超过 500 像素...这就是我想使用最大宽度而不是宽度的原因。我对博客平台没有太多控制权。如果我有，我可能会做其他事情......并且填充是 20px，所以它可能不会有那么大的区别......

【解决方案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'); 
    }); 
});

【讨论】：

【解决方案4】：

由于您已经在使用 CSS 类，您可以使用 toggleClass 方法 - 如果指定的类不存在，则添加它，如果指定的类存在，则使用可选的转换将其移除。

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

在此处查看演示 - http://jqueryui.com/demos/toggleClass/

【讨论】：

他使用的是什么 CSS 类？切换类也不提供动画，这是问题的重点。
"var cssObj = {'max-width' : '500px','max-height' : '500px;'}" 我指的是这个类。此外，切换确实提供了一个可选动画。
好的，关于动画，但是没有var cssObj不是一个类，它是一个javascript对象。