javascript - 如何使用jQuery绘制边框动画？

我想在悬停的链接周围绘制边框，像这样的动画段http://d2fhka9tf2vaj2.cloudfront.net/tuts/152_QTiPad/Milestones/JavaScriptWebsite.html

请给我一些片段或链接。

谢谢

这就是我尝试用jquery设置动画的方式

        $('a').on('hover', function() {
            $(this).animate({ border: '1px' }, 'slow', 'linear');
            $(this).animate({ border: 'solid' }, 'slow');
            $(this).animate({ border: '#ccc' }, 'slow');
        });

最佳答案

好的，所以我检查了该网站，似乎他们使用的是自定义动画处理程序。
在这里，这是处理所有自定义动画的外部js文件。

Custom Handler

现在，您需要为每行创建多个div。然后根据需要自定义它。如果您想拥有完全一样的外观，

对于水平div，

position:absolute;
border-bottom: 1px;
width: 0px;
height: 0px;
border-bottom-color:#000;
border-bottom-style:solid;

对于垂直div，只需将border-bottom更改为border-left。

现在，jQuery，我将尝试解释自定义处理程序的工作原理，如果您直接要复制粘贴，

Here you go。

首先，定义要设置动画的div，$fx('#theHeader1')，然后添加用于使动画工作为.fxAdd({type: 'width', from: 0, to: 770, step: 10, delay: 10})的参数，这里-


类型：可以与要更改的高度，左侧，顶部相同
从：价值开始
至：价值高达
步骤：描述速度（如果从较大的值变为较小的值，则应为负）
延迟：我想它是平滑的，没有延迟，它似乎是越野车。



  只能说：制作这种动画需要很多时间。