用jquery通過分辨率更改寬度和高度

Question

我在這裏發佈了一個新問題，當我的屏幕分辨率低於980像素時，我得到了如何刪除圖像寬度和高度的答案。

我得到這個代碼：

<img width="477" height="299" src="/uploads/2012/01/415.jpg" class="attachment-portfolio2 wp-post-image"/> 

var images; 

$(function() { 
    images = $('img.wp-post-image'); 
    removeSize(); 
}); 

$(window).resize(removeResize); 

function removeSize() 
{ 
    if($(window).width() < 980 && images.length > 0) 
    { 
     images.removeAttr('width').removeAttr('height'); 
    } 
} 

現在，我想將其更改爲 「改變寬度的jQuery COMAND」 和我tryed說：

var images; 

    $(function() { 
     images = $('img.wp-post-image'); 
     removeSize(); 
    }); 

    $(window).resize(removeResize); 

    function removeSize() 
    { 
     if ($(window).width() < 960) { 
    $('img.wp-post-image').animate({width:'400px'}); 
    $('img.wp-post-image').animate({height:'300px'}); 
} 
else { 
    $('img.wp-post-image').animate({width:'400px'}); 
    $('img.wp-post-image').animate({height:'300px'}); 
} 
    } 

但不工作，有什麼不好？謝謝

Answer 1

如果簡化成常規功能，你會得到：

$(function() { 
    var images = $('img.wp-post-image'); 
    $(window).on('resize', function() { 
     if ($(window).width() < 960) { 
      $('img.wp-post-image').animate({ width: '400px' }); 
      $('img.wp-post-image').animate({ height: '300px' }); 
     } else { 
      $('img.wp-post-image').animate({ width: '400px' }); 
      $('img.wp-post-image').animate({ height: '300px' }); 
     } 
    }); 
}); 

這會工作得很好，除了一個事實，即如果/其他人似乎靜音，因爲它同無論如何，你在同一時間兩次製作相同的元素？您是否嘗試連鎖動畫，如果是的話使用回調功能：

$('img.wp-post-image').animate({ width: '400px' }, 500, function() { 
     $(this).animate({ height: '300px' }, 500); 
});