JQuery使用toggleClass和fadeTo

我試圖做一些看起來很簡單，但它不工作的權利。也許我太簡單了。JQuery使用toggleClass和fadeTo

我只會寫下面的相關代碼。

我使用引導程序在我的HTML中創建按鈕。該類只是使按鈕白色：

<button id="my_button" class="btn-default">Button</button>

接下來，我在我的CSS創建了一個類。它只是使透明的元素：

.select {opacity: 0.1;}

最後，在JQuery中我使用toggleClass和fadeTo功能動畫按鈕被點擊時：

${'#my_button'}.toggleClass('btn-warning select').fadeTo('slow', 1);

的BTN-warning類改變顏色黃色。

這是我很期待的情況發生：

頁面加載它只是一個純白色的按鈕
我按一下按鈕，它變成黃色，不透明度的變化至10％，那麼淡出達到100％
我再次單擊該按鈕，它只是變回純白色按鈕
我再次點擊它，則重複步驟2
所以等等

看起來很簡單。第1步按預期工作，第2步完美，第3步優秀，第4步...沒有骰子

它只在第一次點擊時執行淡入淡出，之後它變爲黃色，因爲它應該，但沒有淡入淡出影響。

邏輯上，我有我的普通默認按鈕。我點擊它，JQuery將添加btn-warning和select類到按鈕，將它變成黃色，並將不透明度設置爲10％，然後將不透明度淡化到100％。我再次單擊它，JQuery刪除btn-warning類並選擇類，該類將按鈕恢復爲其原始形式，fadeTo沒有效果，因爲沒有選擇類的不透明度已經是100％。

這一切都很好，但是當我再次點擊JQuery的應該再添加兩個階級，

來源

2017-02-22 keithmj

你的問題是什麼？你究竟在做什麼？ –

請創建一個代碼片段，顯示您正在嘗試做什麼，以及您需要的位置。它必須從您的問題中瞭解它 –

jQuery使用內聯樣式來爲淡出的動畫製作動畫。當您嘗試執行步驟4時，也許管理不透明度的內聯樣式仍然存在。內嵌樣式將覆蓋'.select {opacity：0.1;}'。這只是一個猜測，如果你可以提供小提琴，那麼我們可以幫助你更多。 – sniels

使用動畫的方法重置不透明度爲0.1和複製fadeTo

var myBtn = $('#my_button'); 
 
$(myBtn).click (function() { 
 
    $(myBtn).toggleClass('btn-warning'); 
 
    if ($(myBtn).hasClass ("btn-warning")) { 
 
    $(myBtn).css ({opacity: 0.1}); 
 
    $(myBtn).animate ({opacity: 1.0}, 1000); 
 
    } 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="my_button" class="btn btn-lg btn-default">Button</button>

來源

2017-02-22 16:56:39

這正是我想要做的！非常感謝！！！！ – keithmj

JQuery使用toggleClass和fadeTo

回答

相關問題