登录

jquery一个来回伸展收缩的slideUp和slideDown函数网页代码

很简单的一个jQuery特效,点击展开收缩,大部分站长们的网站中或多或少的用到了这个效果,有木有感慨,真特么简单哈,给不懂jQuery白的不能再白的小白站长用,大神们请绕路哈,感谢

          <a href="http://www.zbpnice.cn" style="color:#06F; display:none">http://www.zbpnice.cn</a>
<!DOCTYPE html>
<html>
<head>
<title>展开收缩-柏平博客原创</title>
<script src="https://www.zbpnice.cn/demo/12/js/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  });
});
</script>
</head>

<body>

<p id="p1">http://www.zbpnice.cn</p>
<button>点击这里</button>

</body>
</html>

以上效果是否感觉有点别扭嘞,要想使上面的效果点击一下展开,点击一下收缩,请移步到下面观看:

          <a href="http://www.zbpnice.cn" style="color:#06F; display:none">http://www.zbpnice.cn</a>
<!DOCTYPE html>
<html>
<head>
<title>展开收缩-柏平博客原创</title>
<script src="https://www.zbpnice.cn/demo/12/js/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function()
  {
    var i=0;
        $("button").bind("click",function() {
            if(i==0){
                 $("#p1").slideUp("slow");
                 i=1;
            }else  {
                 $("#p1").slideDown(1500);
                 i=0;
            }

        });
});
</script>
</head>
<body>
<p id="p1" style="color:#06F; display:none">http://www.zbpnice.cn</p>
<button>点击这里</button>
</body>
</html>

其实还有种更简单的方法,你知道么??

啥,你知道?

我去,知道就知道呗,又不妨碍我装逼。

来来来,围观toggle()用法,以下贴代码:

          <a href="http://www.zbpnice.cn" style="color:#06F; display:none">http://www.zbpnice.cn</a>
<!DOCTYPE html>
<html>
<head>
<title>展开收缩-柏平博客原创</title>
<script src="https://www.zbpnice.cn/demo/12/js/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function()
  {
   $("button").click(function(){
    $("#p1").slideToggle("slow");
  });
});
</script>
</head>
<body>
<p id="p1" style="color:#06F; display:none">http://www.zbpnice.cn</p>
<button>点击这里</button>
</body>
</html>

看了这个,是不是超简单,一行代码解决。

啥,为啥不早拿出来?

我去,早拿出来,我拿什么装逼,是吧。

选择赏赐方式:

×

多少都是心意,感谢大家

选择分享方式:

×

扫一扫分享到微信朋友圈

标签: jQuery

本文标题:jquery一个来回伸展收缩的slideUp和slideDown函数网页代码

本文地址:https://www.zbpnice.cn/post/109.html

温馨提示:文章内容系作者个人观点,不代表柏平博客对观点赞同或支持。

版权声明: 本文为原创文章,创建于3年前 (2017-07-19),版权归 柏平 所有,欢迎分享本文,转载请保留出处!

还没有留言,还不快点抢沙发?

发表评论: