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