動畫懸停和活動類問題 - jQuery

我對jQuery相當陌生，所以我真的不知道下面的問題是否是由我看不到的非常微不足道的東西引起的。無論如何，我搜索了很長時間，很難找到答案，但沒有找到答案。我希望你可以幫助我！動畫懸停和活動類問題 - jQuery

我一直在試圖編寫一個簡單的標籤式菜單，補充我的滑動內容。我希望這些標籤具有一些會在懸停時淡入的背景，並且活動類將被刪除並相應添加到您點擊的標籤中。

這裏是我的淡入淡出效果代碼，使用jQuery顏色插件：

$('#menu a').not('.active').hover(function(){ 
     $(this).stop().animate({backgroundColor: '#FCEA77', 'opacity': '0.3'}, 'slow'); 
}, function() { 
    $(this).stop().animate({backgroundColor: '#000000', color:'#ffffff', 'opacity': '1'}, 'slow'); 
});

下面是活動類代碼：

$('a').click(function() { 
$(".active").removeClass("active"); 
$(this).addClass("active"); 
});

都工作應如何對自己的，但是當我嘗試讓它們同時工作時，會發生淡入淡出效果，並且當您單擊另一個選項卡時，活動類將從當前類中移除，但被點擊的選項卡不會獲得活動類。任何想法是什麼導致這個？如果這件事真的很容易和明顯，我很抱歉。

哦，這裏是我的CSS：

#menu { padding: 10px 0 0 0; 
    height: 25px; 
    color: white; 
    font-weight: bold; 
    font-size: 14px; 
    position:relative; 
} 

#menu a{ 
    color:white; 
    padding: 10px; 
    text-decoration: none; 
} 

#menu a.active { 
    color:black; 
    background:#FCEA77; 
}

和我的HTML：

 <div id="menu"> 
     <a href="#home" class="active">Home</a> 
     <a href="#news">News</a> 
     <a href="#info">Info</a> 
     <a href="#team">Team</a> 
     <a href="#gallery">Gallery</a> 
     </div>

非常感謝你提前！

來源

2012-06-15 CailleachBhan

看到的東西，你**的backgroundColor **和**的 '不透明性' 之間的不同**關鍵字？（行情？） – Th0rndike

嗯，是的，現在你說出來了......但是如果我把它們都放在一起或者根本不放在一起，它就不會改變任何東西。應該是？ – CailleachBhan

將它們從關鍵字中取出，但將它們保留在值中。如：backgroundColor：'紅色'，不透明度：'0.3' – Th0rndike

在動畫取下性質的所有單引號
使用.on('mouseenter', ...)和.on('mouseleave', ...)代替.hover(...)，否則只能在文件準備就緒時不活動的元素將成爲目標
將$(this).trigger('mouseleave');置於click回調

例here

來源

2012-06-15 15:23:04 satoshi

噢，這完全正常！非常感謝，這是我想要的200％！：d – CailleachBhan

試試這個

$('#menu a').hover(function(){ 
     if(!$(this).hasClass('active')) { 
      $(this).stop().animate({'backgroundColor': '#FCEA77', 'opacity': '0.3'}, 'slow'); 
      }, function() { 
       $(this).stop().animate({'backgroundColor': '#000000', 'color':'#ffffff', 'opacity':  '1'}, 'slow'); 
     } 
    }

，你可以檢查這個例子太Demo

來源

2012-06-15 15:06:40

感謝您的回答，但這並不奏效。如果選項卡的類是活動的，它不會被動畫化，這就是爲什麼我把.not放入。我只想讓活動類切換到被點擊的選項卡，但是當我使用.animate，出於某種原因。 – CailleachBhan

我更新了它，再次檢查 –

我現在看到的問題。不透明度根本不需要引號，而其他CSS規則確實需要它。所以它是：

$('#menu a').not('.active').hover(function(){ 
    $(this).stop().animate({backgroundColor: '#FCEA77', opacity: 0.3}, 'slow'); 
}, function() { 
$(this).stop().animate({backgroundColor: '#000000', color:'#ffffff', opacity: 1}, 'slow'); 
});

來源

2012-06-15 15:16:01 Th0rndike

謝謝！這很好理解，但它並不真正解決我的問題。懸停動畫仍然很好地工作，但當你點擊一個標籤時，活動類不會切換... – CailleachBhan

是this你想要什麼？

我看到的問題是，.animate直接向<a href>標記添加樣式，它們根據普通CSS規則覆蓋.active類中的任何樣式。

最簡單的方法是添加!important到active類樣式：

#menu a.active { 
    color: black !important; 
    background: #FCEA77 !important; 
}

來源

2012-06-15 15:21:26 Blazemonger

是的！有用！正是這樣，非常感謝你！：D如果我也可以這麼大膽地問這個問題：是否有可能編寫代碼，當你點擊它時變成激活的標籤，當你將它懸停時，它不會淡出？這不是非常重要，但我想我可能會問。 – CailleachBhan

當然，只要在'active'類中添加'opacity：1.0！important;'就可以了：http://jsfiddle.net/PaJS6/12/ – Blazemonger

非常歡迎 - 別忘了[接受你最喜歡的答案]（http： //meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work）。 – Blazemonger

動畫懸停和活動類問題 - jQuery

回答

相關問題