jquery hide, show event and prompt callback, fade in and out fadeToggle, slide in and slide out slideToggle, animation animate stop animation stop-JS Tutorial-php.cn

jquery hide, show event and prompt callback, fade in and out fadeToggle, slide in and slide out slideToggle, animation animate stop animation stop

巴扎黑

Release： 2017-06-30 11:15:34

Original

1699 people have browsed it

1.jquery hide and show event

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

Copy after login

Display prompt callback after hiding

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

Copy after login

2.Fade in and out

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

Copy after login

3.Slide in and slide out

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

Copy after login

Examples are as follows:

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

Copy after login

4. Animation animate

First of all, explain why you need to call animate instead of directly modifying css properties: animate can be used to slowly modify the style and animation of p The effect is more beautiful, but directly modifying the css will cause the loading and flashing to be completed directly, and the effect is not good.

By default, the position of all HTML elements is static and cannot be moved. To manipulate position, remember to first set the element's CSS position property to relative, fixed, or absolute.

Example:

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

Copy after login

Step-by-step animation

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

Copy after login

5. Stop animation

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

Copy after login

The above is the detailed content of jquery hide, show event and prompt callback, fade in and out fadeToggle, slide in and slide out slideToggle, animation animate stop animation stop. For more information, please follow other related articles on the PHP Chinese website!