jquery - 调整图像大小并保持新大小

Question

我有一个具有特定宽度和高度值的图像<img id="image" width="500" height="100"/>，我想将此图像调整为一个新值，并让它们无限期地变化。

我用.effect()这个函数..

$( document ).click(function() {
$( "#image" ).effect( "size", {
to: { width: 200, height: 60 }
}, 1000 );
});

但不幸的是，它似乎是一个有限的时间功能，图像恢复到原来的大小。

解决方案或有用的教程很棒，谢谢。

更新：

关于我发生的事情的小提琴：http: //fiddle.jshell.net/SdHGK/

Answer 1

$(document).click(function() {
  $( "#toggle" ).animate({ width: '200px', height: '60px'}, 1000 );
});

Answer 2

像这样的东西？http://jsfiddle.net/8NdHU/

$('img').on('click', function(){
    $(this).css('width', '200%'); 
});

更新

http://jsfiddle.net/8NdHU/1/

$('img').on('click', function(){
    $(this).animate({
        width: '100%'
    }, 5000); 
});

Answer 3

您可以尝试为每种尺寸使用两个类名，然后单击更改类名。

function changeSize () {
var myId = document.getElementById("Your Id Goes Here");
myId.className="mySecondClassname";
}

你也可以用 Css3 来做。

#yourImage {
    width:50px;
    height:200px;
    border:solid red 1px;
    transition:what you want to transition Duration; //probably width and height
}

    #yourImage:target {
    width:200px;
    height:400px;
}

您需要在您的图像容器中添加一个“#”符号，该符号在单击时会显示在 url 中。

Answer 4

看看这个

$( document ).click(function() {
  $( "#toggle" ).effect( "size", {
    to: { width: 200, height: 60 }
  },'slow', function () {
      $("#toggle").css({'width':'200px', 'height': '60px'});
  });
});

http://fiddle.jshell.net/SdHGK/2/

PS：这个想法来自Chanckjh的 回答和来自http://jqueryui.com/effect/