jquery - Jquery click and toggleClass 问题

Question

这是我可能（并且希望）的简单问题：

我有一个带有图像作为导航的列表。当您将鼠标悬停在它们上方时，jquery 会为带有标题的 div 设置动画并显示它。它在鼠标移出时消失。（工作正常）

当您单击图像时，标题 div 会进一步动画并完全覆盖图像（工作正常）。将鼠标悬停在导航中的另一个图像上时，标题 div 也会动画（工作正常）。

问题：单击第二个导航图像时，第一个（单击）的动画应该消失。

这是jQuery：

var thumbslide = $('.boxgrid.captionfull').click(function() {
   $(this).toggleClass('clicked').children('.cover').stop().animate({top: 0, height:"230px", opacity: 1}, 350);
});
$('.boxgrid.captionfull:not(.clicked)').live('mouseenter', function() {
    $(this).children('.cover').stop().animate({top: 130}, 350);
}).live('mouseleave', function() {
    $(this).children('.cover').stop().animate({top: 230}, 350);
})

这是开发网站的链接

欢迎任何帮助，谢谢。

Answer 1

这将删除clicked该类并对其进行动画处理并将不透明度返回到 0.7：

var thumbslide = $('.boxgrid.captionfull').click(function() {
   $('.boxgrid.captionfull.clicked').removeClass('clicked').children('.cover').stop().animate({top: 230, opacity: 0.7}, 350);
   $(this).toggleClass('clicked').children('.cover').stop().animate({top: 0, height:"230px", opacity: 1}, 350);
});

Answer 2

这不只是找到任何其他点击项目并删除其点击类的情况吗？

var thumbslide = $('.boxgrid.captionfull').click(function() {
   $('.boxgrid.captionfull.clicked').removeClass('clicked');
   $(this).toggleClass('clicked').children('.cover').stop().animate({top: 0, height:"230px", opacity: 1}, 350);
});