3

我已经设置了我所追求的功能,但是当图像具有基于百分比的宽度时,我无法弄清楚如何获得相同的结果。

http://jsfiddle.net/bs8Tw/

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

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

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

});    

如您所见,当单击图像时,它的宽度会加倍。再次单击它时,它会恢复到正常大小。然而,这里的关键是,如果单击一个图像,然后单击另一个图像,则第一个图像会在第二个图像增加之前恢复到正常大小。

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

4

1 回答 1

4

我想您的问题更多是关于“我如何确定宽度是否为 50%”。嗯,这很简单:只需检查它是否是容器宽度的 50%。事实上,因为否则它将是宽度的 100%,您只需检查它是否小于容器宽度的 60%。

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

这确实假设“容器”是您想要的图像的最大尺寸,但.closest如果它比父级更高,您可以随时使用。

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

于 2013-02-20T22:09:22.583 回答