changement largeur et la hauteur avec Jquery par la résolution

Question

Je publié une nouvelle question ici et j'ai eu une réponse à comment je peux supprimer la largeur de l'image et de la hauteur lorsque ma résolution d'écran est inférieure à 980px.

J'ai eu ce code:

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

Maintenant, je veux changer de "largeur de changement jquery COMAND" et je tryed que:

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

Mais ne fonctionne pas, ce qui est faux? Merci

Answer 1

Si vous simplifiez cela en fonction régulière, vous obtiendrez:

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

qui fonctionnerait très bien, autre que le fait que le si/reste semble muet, comme il le fait même chose, peu importe quoi, et vous animez les mêmes éléments deux fois en même temps? Essayez-vous de chaîne les animations, le cas échéant utiliser la fonctionnalité de rappel:

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