調整圖像大小，並保持新的大小

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中顯示的圖像容器添加一個「＃」符號。