首页 / JQUERY / jquery隐藏、显示事件and提示callback、淡入淡出fadeToggle、滑入滑出slideToggle、动画animate停止动画stop

jquery隐藏、显示事件and提示callback、淡入淡出fadeToggle、滑入滑出slideToggle、动画animate停止动画stop

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jquery隐藏、显示事件and提示callback、淡入淡出fadeToggle、滑入滑出slideToggle、动画animate停止动画stop，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2755字，纯文字阅读大概需要4分钟。

内容图文

1.jquery隐藏and显示事件
$("p").hide();      //隐藏事件
$("p").hide(1000);  //1秒内缓慢隐藏
$("p").show();      //显示事件
$("p").toggle();    //在隐藏和显示中切换

隐藏后显示提示callback

$("p").hide(function(){    alert("提示消息已经隐藏");    });
$("p").hide(1000,function(){    alert("1s内缓慢隐藏并提示消失已经隐藏");    });

2.淡入淡出

$("#p1").fadeIn();             //淡入$("#p2").fadeIn("slow");   //缓慢淡入$("#p3").fadeIn(3000);    //延迟3秒淡入
$("#p").fadeOut()            //淡出
$("#p").fadeToggle()        //淡入淡出
$("#p3").fadeTo("slow",0.7);     //设置淡化程度  0完全消失，1不淡化

3.滑入滑出

$(".panel").slideDown();         //向下滑动显示class=panel的p
$(".panel").slideUp("slow");    //向上收起class=panel的p
$(".panel").slideToggle("slow");    //点击显示，再点击收起

例子如下：

<head>
<script type="text/javascript">
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideToggle("slow");    //点击向下滑动显示p，再次点击收起
  });
});
</script>
<style type="text/css"> 
p.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
p.panel
{
height:120px;
display:none;   /*设置隐藏的p*/
}
</style>
</head>
<body>
<p class="panel">
<p>显示隐藏的p</p>
<p>请大家关注我的博客</p>
</p>
<p class="flip">点击显示，再次点击隐藏</p>
</body>

4.动画animate

首先，说明一下为什么要调用animate，而不是直接修改css属性：用animate可以缓慢的修改p的样式，动画效果更加美观，而直接修改css则是加载闪烁直接完成，效果不佳。

默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。

例子：

<head>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("p").animate({
      left:'250px',
      opacity:'0.5',        //淡化
      height:'150px',
      width:'150px'
      //height:'+=150px',       //可使用相对值
      //width:'+=150px'
      //height:'toggle',           //使用预定值，从消失到显示
      //width:'toggle'
    });
  });
});
</script> 
</head>
<body>
<button>开始动画</button>
<p style="background:#98bf21;height:100px;width:100px;position:absolute;"></p>
</body>

分步动画

<script> 
$(document).ready(function(){
  $("button").click(function(){
    var p=$("p");           //
定义变量
p到指定位置
    p.animate({height:'300px',opacity:'0.4'},"slow");
    p.animate({width:'300px',opacity:'0.8'},"slow");
    p.animate({height:'100px',opacity:'0.4'},"slow");
    p.animate({width:'100px',opacity:'0.8'},"slow");
  });
});
</script>

5.停止动画

$("p").stop();   //按钮会停止当前活动的动画，但允许已排队的动画向前执行。
$("p").stop(true);  //按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。
$("p").stop(true,true);  //会立即完成当前活动的动画，然后停下来。

以上就是jquery隐藏、显示事件and提示callback、淡入淡出fadeToggle、滑入滑出slideToggle、动画animate停止动画stop的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的jquery隐藏、显示事件and提示callback、淡入淡出fadeToggle、滑入滑出slideToggle、动画animate停止动画stop全部内容，希望文章能够帮你解决jquery隐藏、显示事件and提示callback、淡入淡出fadeToggle、滑入滑出slideToggle、动画animate停止动画stop所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/300047.html

来源：【匿名】