我有一系列图片在点击时会展开,但我希望它们在再次点击时恢复到原来的大小。我给图像一个初始类 (.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');
但是好像不行。我对此还是很陌生,所以希望这个解释足够详细。谢谢!
最佳答案
2个选项:
保留标志或检查当前类以了解图像是放大还是缩小。然后相应地运行您的动画。
使用会改变大小的类。然后点击
toggleClass
以在交替点击时增大或缩小。 要显示动画,您可以定义一个transition
css 属性。因此,无论何时切换类,宽度属性都不会突然改变,而是显示动画效果。
第二个选项的 javascript。
$("img").on("click", function(){
$(this).toggleClass("selected");
});
关于javascript - 重新点击图片缩小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24689467/