如何切换响应图像的大小，扭曲

Question

我已经设置了一个小提琴的功能，但我无法弄清楚如何在图像具有基于百分比的宽度时获得相同的结果。

http://jsfiddle.net/bs8Tw/

$('img').click(function() { 

    var toggleWidth = $(this).width() == 350 ? '700px' : '350px'; 

    $('img').animate({ width: '350px' }); 
    $(this).animate({ width: toggleWidth }); 

});  

正如你可以看到，当点击图像时，双打宽。当它再次点击时，它将恢复到正常大小。然而，这里的关键是，如果一个图像被点击，然后另一个图像，第一个图像在第二个图像增加之前返回到它的正常大小。

基本上，我在寻找这个确切的功能，但我希望图像在50％和100％宽度之间切换。

Answer 1

我想你的问题是关于“我怎样才能确定宽度是否50％”。这很简单：只要检查它是否是容器宽度的50％。实际上，因为它将是宽度的100％，所以您可以检查它是否小于容器宽度的60％。

var toggleWidt = $(this).width() < $(this).parent().width() * .6 ? '100%' : '50%' 

这并不认为“容器”是你想要的图像最大尺寸，但你可以随时使用.closest，如果它的东西，越往上比母体。

http://jsfiddle.net/bs8Tw/2/