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

Question

我有一个图像，具有一定的宽度和高度值<img id="image" width="500" height="100"/>，我想调整这个图像到一个新的值，并保持这个变化无限的时间。

我用.effect()功能的..

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

但不幸的是，似乎这是一个有限的时间函数，图像返回到原来的大小。

解决方案或有用的教程是伟大的，谢谢。

UPDATE：

小提琴什么与我发生了：http://fiddle.jshell.net/SdHGK/

Answer 1

看一看这个

$(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：的想法是从Chanckjhanswer截断并从http://jqueryui.com/effect/

Answer 2

这样的事情？ http://jsfiddle.net/8NdHU/

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

UPDATE

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

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

Answer 3

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

Answer 4

您可以尝试点击更改类名，然后使用两个类名的每个大小。

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中显示的图像容器添加一个“＃”符号。