img動畫最大寬度[JQuery]

我試過尋找一個解決方案，但找不到任何好東西。img動畫最大寬度[JQuery]

我正在爲我的一個朋友定製博客。當它加載時，我希望每個帖子中的所有img具有150px的最大寬度和最大高度。當用戶按img時，最大值應該增加到500px，這很容易。我的代碼存在的問題是我無法獲得它的動畫，我想要的。有什麼幫助嗎？的

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

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

來源

2011-02-04 Øyvind

而是採用.css()，請嘗試使用.animate()

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

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

來源

2011-02-04 18:38:04 jondavidjohn

不錯，動畫正在工作，但最大尺寸出錯了......最大寬度約爲340，高度爲275 ......奇怪！ – 2011-02-04 18:42:45

我會檢查您的利潤率/填充以說明160px的損失 – jondavidjohn 2011-02-04 18:43:39

@Øyvind：另外，圖片實際上有多大？ – 2011-02-04 18:55:37

$(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'); 
    }); 
});

來源

2011-02-04 18:43:37

既然你已經使用了CSS類，你可以使用toggleClass方法 - 將指定的類，如果它不存在，並如果存在，則使用可選的轉換移除指定的類。

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

看到這裏演示 - http://jqueryui.com/demos/toggleClass/

來源

2011-02-04 18:45:05 Mayank

我得到它的工作，結合兩個其他的答案（和刪除在CSS代碼最大寬度&最大高度）

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

來源

2011-02-04 18:51:18

img動畫最大寬度[JQuery]

回答

相關問題