javascript - 如何通过扭曲切换响应图像的大小

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/