单击时使用jquery更改图像的css属性

所以我是javascript的初学者，这可能是一个真正的初学者问题。我一直在到处寻找答案，甚至尝试修改一些基本手风琴的源代码，但都不起作用

基本上我想写一个函数，当你点击一个缩略图时，图像会展开。我已经记下了这一部分，我不明白的是，当你点击另一张图片时，第一张图片会变回缩略图，而新点击的图片会扩展。我希望有一个动画的质量，但我会很高兴与基本的功能，也许我可以想出如何动画它自己。我的图像库位于一个无序列表中，每个图像都被设置为一个列表项，我正在尝试使用jquery来实现这一点

提前谢谢

以下是我在单击时使图像变大的方法：

$('ul#live li img').click(function() {
    $(this).animate({
        'width': '515px',
        'height':'100%' 
    });
});

我的css：

现场直播{ 宽度：120px； 高度：72px； }

就这样。

---

现在我想要的是能够点击另一张图片，点击第一张图片回到原来的120px宽度。就这样。我不想把它从流程中移除，也不想把它放在任何类型的灯箱中。我这样做可能不是最好的方式，我只是在学习和实验。希望这能澄清问题。

这是一个非常广泛的问题。您可能会编写一大堆代码来做一些您认为相当简单的事情

对于初学者，我建议您使用jQuery插件。然后你只需要做一些最小的设置和配置，同时你可以把它分开来学习它是如何工作的

---

我喜欢一个叫做的，它的功能类似于你所描述的，还有很多其他功能。如果不合适，有许多不同的jQuery插件，它们除了处理缩略图、图库、幻灯片、灯箱和所有可能的组合之外什么都不做。

可以直接完成。我在过去使用Simular所做的是给扩展的元素一个新类

$（this.addClass（'active_element'）

然后可以添加动画，以便在单击下一个项目时，任何带有
.active\u element
的项目都会首先受到影响-运行动画，删除类，然后为新选定的元素运行效果

$('ul#live li img').click(function() {
    $('.active_element').animate({

    //close animation goes here

    });
    $('.active_element').removeClass('active_element');

    $(this).animate({
        'width': '515px',
        'height':'100%' 
    });

    $(this).addClass('active_element');

});

这可以写得更简洁一些，但这是一步一步阐述的基本原则

它又脏又脏，但可以完成任务。
谢谢！！！我知道这会非常简单，但我就是不明白。这很有帮助！removeClass采用类名，而不是CSS选择器。我试图修复它，但我的编辑需要6个或更多字符，唯一需要更改的是删除removeClass参数中的“.”