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

您需要在图片容器中添加一个“＃”符号，该符号会在点击时显示在网址中。

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 answer和http://jqueryui.com/effect/

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

4 个答案: