jQuery实现网站导航抖动效果的代码分享

今天小编给大家分享的是jQuery实现网站导航抖动效果的代码，相信很多人都不太了解，为了让大家更加了解jQuery实现网站导航抖动效果的代码，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。

使用jQuery实现网站导航抖动效果

知识点

1、each遍历节点

2、 animate()自定义动画

代码

                
        
            
百度
            
淘宝
            
新浪
            
网易
            
搜狐
            
腾讯
            
优酷
            
京东
        
    

运行结果

鼠标放上后会不停抖动

            // 停止抖动            stopShake(this);        });        function shake(ele) {            // 1. 设置css            $(ele).css({               'position': 'relative'            });            // 2. 确定走动的值            var animateLeft = $(ele).css('left') === '10px' ? '-10px' : '10px';            $(ele).animate({                left: animateLeft            }, 100, function () {                shake(ele);            });        }        function stopShake(ele) {            $(ele).stop(true, false).css({                left: '0'            })        }    });

运行结果

鼠标放上后会不停抖动

关于jQuery实现网站导航抖动效果的代码就分享到这里了，希望以上内容可以对大家有一定的参考价值，可以学以致用。如果喜欢本篇文章，不妨把它分享出去让更多的人看到。