登录  /  注册
首页 > web前端 > js教程 > 正文

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

巴扎黑
发布: 2017-06-30 11:15:34
原创
1437人浏览过

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:&#39;250px&#39;,
      opacity:&#39;0.5&#39;,        //淡化
      height:&#39;150px&#39;,
      width:&#39;150px&#39;
      //height:&#39;+=150px&#39;,       //可使用相对值
      //width:&#39;+=150px&#39;
      //height:&#39;toggle&#39;,           //使用预定值,从消失到显示
      //width:&#39;toggle&#39;
    });
  });
});
</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:&#39;300px&#39;,opacity:&#39;0.4&#39;},"slow");
    p.animate({width:&#39;300px&#39;,opacity:&#39;0.8&#39;},"slow");
    p.animate({height:&#39;100px&#39;,opacity:&#39;0.4&#39;},"slow");
    p.animate({width:&#39;100px&#39;,opacity:&#39;0.8&#39;},"slow");
  });
});
</script>
登录后复制

5.停止动画

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

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

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号