javascript - 重新点击图片缩小

Question

我有一系列图片在点击时会展开，但我希望它们在再次点击时恢复到原来的大小。我给图像一个初始类 (.images)，然后添加一个类“selected”。

HTML:

<div class='images'>
    <img src="file:///F|/Desktop/testing new site/sdfs/img/work/Yama/yama1.jpg" width="200" height="150" />
    <img src="file:///F|/Desktop/testing new site/sdfs/img/work/Yama/yama2.jpg" width="200" height="150" />
    <img src="file:///F|/Desktop/testing new site/sdfs/img/work/Yama/yama3.jpg" width="200" height="150" />
</div>

Javascript:

$(".images img").click(function () {
    $(".images img").removeClass('images')
    $(this).addClass('selected');
    $(this).animate({
        width: '50%',
        height: '50%'
    }, 50).css('z-index', 999);
});

所以现在图像将正确展开。我正在考虑只删除添加的选定类，以便它返回到默认的 .images 图像

  $(".images img").removeClass('active');   

但是好像不行。我对此还是很陌生，所以希望这个解释足够详细。谢谢!

Answer 1

2个选项:

1. 保留标志或检查当前类以了解图像是放大还是缩小。然后相应地运行您的动画。

2. 使用会改变大小的类。然后点击 toggleClass 以在交替点击时增大或缩小。要显示动画，您可以定义一个 transition css 属性。因此，无论何时切换类，宽度属性都不会突然改变，而是显示动画效果。

第二个选项的 javascript。

$("img").on("click", function(){
    $(this).toggleClass("selected");
});

See this sample .