howler.js - 按钮在课堂变化中淡入和淡出音乐

时间:2014-06-12 12:16:54

标签: javascript jquery html css howler.js

你好我需要帮助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小时内搜索答案:(

1 个答案:

答案 0 :(得分:0)

我认为你与你的代码混淆了。这很简单。您可以使用opacity属性创建一个类,然后在单击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