使用.fadeToggle（）淡入文本並在懸停時淡出

我非常接近得到我想要的，但需要多一點幫助。使用.fadeToggle（）淡入文本並在懸停時淡出

$('.change').hover(function() { 
 
    $(this).fadeToggle('slow', 'linear', function() { 
 
    $(this).text('wanna be CodeNinja').css('color', 'grey'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>a <span class="change">CodeNinja</span>.</h1>

我只是想有人將鼠標懸停在下劃線CodeNinja，然後爲它在褪色，顯示想成爲CodeNinja然後鼠標移開顯示CodeNinja再次打開。

哦域是www.mrpben.net

來源

2017-01-03 mrpbennett

現在會發生什麼，創造的jsfiddle –

可以通過提供一個功能text()這臺根據當前新的文本值，再次使用fadeToggle()一旦你設置文本（實現此再次顯示該元素）以及toggleClass()以設置/取消設置文本顏色。試試這個：

$('.change').hover(function() { 
 
    $(this).fadeToggle('slow', function() { 
 
    $(this).text(function(i, t) { 
 
     return t == 'CodeNinja' ? 'wanna be CodeNinja' : 'CodeNinja'; 
 
    }).fadeToggle().toggleClass('over'); 
 
    }); 
 
});

.change.over { 
 
    color: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>a <span class="change">CodeNinja</span>.</h1>

來源

2017-01-03 17:12:08

當然，我使用（http://api.jquery.com/ [文本（）''的這個簽名]文本/＃文本功能），它允許你提供一個功能。 'i'參數是當前元素的索引，'t'是它當前的文本值。從那裏我使用[三元表達式]（https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator）然後返回所需的值。在這種情況下，它只是在兩個值之間切換。 –

感謝兄弟非常感謝這真的很酷。也很高興看到我也超級親密。再次感謝 – mrpbennett

三元組與這一樣：'if（t =='CodeNinja'）{return'想成爲CodeNinja'} else {return'CodeNinja'}' –

使用.fadeToggle（）淡入文本並在懸停時淡出

回答

相關問題