在点击时切换div的音频和动画?

时间:2013-11-07 15:20:39

标签: javascript jquery css audio toggle

请参阅小提琴:http://jsfiddle.net/rabelais/2CkBY/1/

  1. 当前代码通过鼠标输入和鼠标离开事件触发音频和动画播放和暂停。

  2. 我想更改此代码,以便点击事件触发音频和动画。

  3. 如何更改以下代码以执行上述操作。

  4. 请注意,这是原版的简化版,共有八个条。

    $('#one').mouseenter(function(){
     $('.alt0').animate({width: $(this).width()},
           ($(this).width())/2*1000,"linear",function(){
        $("#refresh-1").show();
        })
    });
    $('#refresh-1').click(function(){
    $('.alt0').width(0);
    $(this).hide();
    })
    $('#one').mouseleave(function(){
     $('.alt0').stop()
    });
    $('#two').mouseenter(function(){
     $('.alt1').animate({width: $(this).width()},  
     ($(this).width())/2*1000,"linear",function(){
        $('#refresh-2').show();
    })
    });
    $('#refresh-2').click(function(){
    $('.alt1').width(0);
    $(this).hide();
    })
    $('#two').mouseleave(function(){
     $('.alt1').stop()
    });
    
    $("#one").mouseenter(function () {
    $('#sound-1').get(0).play();
    });
    $("#one").mouseleave(function () {
    $('#sound-1').get(0).pause();
    });
    $("#two").mouseenter(function () {
    $('#sound-2').get(0).play();
    });
    $("#two").mouseleave(function () {
    $('#sound-2').get(0).pause();
    });
    

0 个答案:

没有答案