Question

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

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

当您单击图像时，标题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);
})

这是dev site

的链接

欢迎任何帮助，谢谢。

Answer 1

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

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);
});

Answer 2

这将删除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);
});

Jquery click和toggleClass问题

2 个答案: