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

回答

相關問題