howler.js - 按鈕淡入和淡出音樂類變化

Question

你好，我需要幫助howler.js http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Library

我做的網站，在這個網站它是一個小圖像

這項工作好音樂它的淡出

$(function(){ 
sh_highlightDocument(); 

$('.ex2-fadein').on('click', function(){ 
    sound2.pause().fadeIn(0.5, 2000); 
}); 
$('.ex2-fadeout').on('click', function(){ 
    sound2.fadeOut(0, 3700); 
}); 

但如果我點擊淡入淡出此相同的圖標，這是行不通的。

請告訴我如何在這個圖標從

<div id="musicoffon" class="ex2-fadeout"><img src="images/music.png"></div> 

改變類

<div id="musicoffon" class="ex2-fadein"><img src="images/music.png"></div> 

後我點擊？

感謝您的任何幫助。我真的搜索答案6小時:(

Answer 1

我認爲你已經混淆了你的代碼，它非常簡單，你可以創建一個具有不透明屬性的類，然後當你點擊div「musicoffon」時切換類。其餘的，你需要使用jQuery UI的這個

HTML：

<div id="musicoffon" class="ex2-fadeout"><img src="http://www.detailinggurus.com/images/sample_bottles.jpg"></div> 

CSS：

.ex2-fadein 
{ 
opacity:0.6; 
} 

JQUERY：

$(document).ready(function(){ 
    $('#musicoffon').on('click', function(){ 
     $(this).toggleClass('ex2-fadein',500); 
    }); 
}); 

Have a Fiddle