jQuery实现点击按钮闪烁

最新推荐文章于 2024-09-21 11:28:04 发布

原创最新推荐文章于 2024-09-21 11:28:04 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #WEB前端

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

5 篇文章

订阅专栏

jQuery

3 篇文章

订阅专栏

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

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;
}