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

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

知识点

1、each遍历节点

2、 animate()自定义动画

代码

    
    
    
    

        

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

运行结果

鼠标放上后会不停抖动

            // 停止抖动
            stopShake(this);
        });


        function shake(ele) {
            // 1. 设置css
            $(ele).css({
               &＃39;position&＃39;: &＃39;relative&＃39;
            });

            // 2. 确定走动的值
            var animateLeft = $(ele).css(&＃39;left&＃39;) === &＃39;10px&＃39; ? &＃39;-10px&＃39; : &＃39;10px&＃39;;
            $(ele).animate({
                left: animateLeft            }, 100, function () {
                shake(ele);
            });
        }

        function stopShake(ele) {
            $(ele).stop(true, false).css({
                left: &＃39;0&＃39;
            })
        }
    });

运行结果

鼠标放上后会不停抖动

本文来自 js教程 栏目，欢迎学习！

以上就是使用jQuery实现网站导航抖动效果的详细内容，更多请关注 第一PHP社区 其它相关文章！