jQuery学习　二　jQuery 效果

最新推荐文章于 2020-07-14 16:53:38 发布

火影忍者-宇智波鼬

最新推荐文章于 2020-07-14 16:53:38 发布

阅读量243

点赞数

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_22327455/article/details/54945413

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jQuery学习　二　jQuery 效果

二　jQuery 效果
(1) 隐藏和显示 hide() 和 show() 和toggle()
1, hide() 和 show()
$("button").click(function(){
$("p").hide(1000); //hide(speed）隐藏　speed控制速度，参数为slow、fast 或毫秒
});
$("button").dblclick(function(){
$("p").show(1000);
});

2,使用 toggle() 方法来切换 hide() 和 show() 方法，显示被隐藏的元素，并隐藏已显示的元素，toggle(speed) speed控制速度，参数为slow、fast 或毫秒
<body>
    <button>隐藏/显示</button>
    <p>这是一个文本段落。</p>
    <p>这是另外一个文本段落。</p>
</body>
$("button").click(function(){
    $("p").toggle("slow");
});

(2) 淡入淡出 speed　可为"slow"、"fast" 或毫秒
<body>
<button>点击 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
1,fadeIn(speed)
$("button").click(function(){
    $("#div1").fadeIn(); //jQuery fadeIn() 用于淡入已隐藏的元素。
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
});

2,fadeOut(speed)
$("button").click(function(){
    $("#div1").fadeOut(); //jQuery fadeOut() 方法用于淡出可见元素。
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
});

3,fadeToggle(speed)
$("button").click(function(){
    $("#div1").fadeToggle(); //jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
});

4,fadeTo(speed)   fadeTo(speed,opacity) opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
$("button").click(function(){
    $("#div1").fadeTo("slow",0.15); //jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
});

(3) 滑动   speed控制速度，参数为slow、fast 或毫秒
1,slideDown(speed)
<body>
    <div id="flip">点我滑下面板</div>
    <div id="panel">Hello world!</div>
</body>

$("#flip").click(function(){
    $("#panel").slideDown("slow"); //slideDown() 方法用于向下滑动元素。
});

2,slideUp(speed)
<body>
    <div id="flip">点我拉起面板</div>
    <div id="panel">Hello world!</div>
</body>

$("#flip").click(function(){
    $("#panel").slideUp("slow"); //slideUp() 方法用于向上滑动元素。
});

3,slideToggle(speed)
<style type="text/css">
#panel,#flip
{
   padding:5px;
   text-align:center;
   background-color:#e5eecc;
   border:solid 1px #c3c3c3;
}
#panel
{
   padding:50px;
   display:none;
}
</style>
<body>
    <div id="flip">点我，显示或隐藏面板。</div>
    <div id="panel">Hello world!</div>
</body>

$("#flip").click(function(){
    $("#panel").slideToggle("slow"); //slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
});

(4) 动画
animate({params},speed,callback) 　创建自定义动画　params 参数定义形成动画的 CSS 属性。　speed 的值为"slow"、"fast" 或毫秒。
<body>
    <button>开始动画</button>
    <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
    如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    </div>
</body>
$("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',//opacity 属性设置元素的不透明级别。默认值: 1    css3 元素
      height:'150px',
      width:'150px'
    });
});

(5) 停止动画
stop() 方法用于在动画或效果完成前对它们进行停止。
<style type="text/css">
#panel,#flip
{
   padding:5px;
   text-align:center;
   background-color:#e5eecc;
   border:solid 1px #c3c3c3;
}
#panel
{
   padding:50px;
   display:none;
}
</style>
</head>
<body>
    <button id="stop">停止滑动</button>
    <div id="flip">点我向下滑动面板</div>
    <div id="panel">Hello world!</div>
</body>

$("#flip").click(function(){
    $("#panel").slideDown(5000);//slideDown() 方法用于向下滑动元素。
});
$("#stop").click(function(){
    $("#panel").stop(); //stop() 方法用于停止动画或效果，在它们完成之前。
});

(6) callback()方法　函数在当前动画 100% 完成之后执行。
以hide(speed,callback)举例
<body>
    <button>隐藏</button>
    <p>我们段落内容，点击“隐藏”按钮我就会消失</p>
</body>
$("button").click(function(){
    $("p").hide('slow',function(){
            alert('内容已经隐藏');
    });
});

(7) Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）
<body>
    <p id="p1">W3Cschool教程!!</p>
    <button>点我</button>
</body>
$("button").click(function(){
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
});

本文内容题材摘自w3cschool,为自己的学习文章，非教学文章，后面每天会更新内容，直到学完整个jqury. 如需查看题材来源：http://www.w3cschool.cn/jquery/

火影忍者-宇智波鼬

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习　二　jQuery 效果

jQuery学习　二　jQuery 效果二　jQuery 效果(1) 隐藏和显示 hide() 和 show() 和toggle()1, hide() 和 show()$("button").click(function(){ $("p").hide(1000); //hide(speed）隐藏　speed控制速度，参数为slow、fast 或毫秒});$("bu
复制链接

扫一扫