javascript - 单击时切换div的音频和动画？

Question

请看小提琴：http: //jsfiddle.net/rabelais/2CkBY/1/

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

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

3. 如何更改以下代码以执行我上面解释的操作。

请注意，这是一个简化版，原来一共有八个吧。

$('#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();
});