jQuery实现点击按钮闪烁

出道晚了

于 2015-09-15 19:26:59 发布

阅读量1.3k

点赞数 1

分类专栏： jQuery WEB前端文章标签： jQuery WEB前端

本文链接：https://blog.youkuaiyun.com/rockjun7788/article/details/48472949

版权

WEB前端同时被 2 个专栏收录

5 篇文章

订阅专栏

jQuery

3 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的按钮闪烁效果。通过设置定时器让按钮背景颜色和文字颜色在两种状态间切换，达到视觉上的闪烁效果。文章提供了完整的jQuery脚本和对应的CSS样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery实现点击按钮闪烁

    <script>        
        $(document).ready(function(){
            var shan;
            var flag = 0;
            function shanke(){ 
                if (flag < 4) {
                    $("button#btn_jq_red").toggleClass("btn-red2");
                    flag++;
                }else{
                    //Kill the timer
                    clearInterval(shan);
                };

            }
            $("button#btn_jq").click(function(){
                flag = 0;
                shan = setInterval(shanke,200);
			});
		});
	</script>

按钮CSS

.btn-red {
    background: #d4181c;
    color: #fff;
    padding: 5px 40px;
    margin: 0 20px;
}

闪烁按钮CSS

.btn-red2 {
    background: #fff;
    color: #d4181c;
    padding: 5px 40px;
    margin: 0 20px;
    border-style:solid;
    border-color: #d4181c;
}