Javascript 在单击时切换div的音频和动画？

请看小提琴：

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

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

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

请注意，这是原始版本的简化版本，共有八个条

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

---

也许把它重新表述成一个实际的问题？我同意这个描述很疯狂，试着把它放在清单上1。。。。2.3.发生什么你想发生什么就发生什么。。。安吉拉，你会写更多的扩展问题吗？？