Jquery click and toggle Class question

这里是我可能（并希望）简单的问题：Jquery click and toggle Class question

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

当你点击图像，标题div动画进一步，并完全覆盖图像（工作正常）。同时在nav中的另一张图片上悬停，caption 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

任何帮助是值得欢迎的，感谢的链接。

来源

2010-11-08 tobiasmay

这消除了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); 
});

来源

2010-11-08 16:50:28 PetersenDidIt

真棒。作品。但为什么Jamiecs代码（不包括动画部分）只有在再次悬停在最后一项上时才起作用？我的意思是......它确实删除了这个班，但是它不应该再返回到之前的状态？只是想知道.. – tobiasmay 2010-11-08 17:13:58

因为你的'mouseenter' /'mouseleave'代码设置了'top'的值。所以当你对它进行挖掘时，它仍然会进行动画制作，但不透明度将不会恢复。 – PetersenDidIt 2010-11-08 21:13:25

不是这只是找到任何其他点击项目和删除其点击课程的情况下？

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

来源

2010-11-08 16:40:58 Jamiec

猜测它有点走的路，但是当我尝试这种方式，它不仅能消除点击的类，而悬停在以前点击元素.. – tobiasmay 2010-11-08 16:47:01

@tobiasmay - 你可以设置一个简化的jsfiddle显示该问题。 www.jsfiddle.net – Jamiec 2010-11-08 16:48:09

这里是小提琴：http://www.jsfiddle.net/tobiasmay/QudtF/ – tobiasmay 2010-11-08 17:09:21

Jquery click and toggle Class question

回答

相关问题