jquery - 单击链接时动画进度条

Question

我想在点击链接后为进度条设置动画。这是 HTML:

<a class="link" href="#">Click Me</a>
<br>
<div class="progress">
    <div class="meter meter1"></div>
</div>
<br>
<div class="progress">
    <div class="meter meter2"></div>
</div>

以及附加的 CSS :

.progress{
        width: 300px;
        height: 20px;
        background: #c4c4c4;
    }

    .meter{
        height: 20px;
        background: #000;
        width: 0%;
    }

我写的 jQuery 代码如下:

        $.('.link').click(function(){

        $('.meter1').animate({width:'80%'}, 3000, 'swing');
        $('.meter2').animate({width:'70%'}, 3000, 'swing');

    });

虽然如果我删除点击事件并简单地加载页面，动画仍然有效。单击链接后如何使它们具有动画效果？

Answer 1

点击函数前面有一个.

$.('.link')

应该是

$('.link')

JSFIDDLE