jquery masquer, afficher l'événement et le rappel rapide, fondu entrant et sortant fadeToggle, glisser vers l'intérieur et vers l'extérieur slideToggle, animation animer arrêter l'animation arrêter-js tutoriel-php.cn

jquery masquer, afficher l'événement et le rappel rapide, fondu entrant et sortant fadeToggle, glisser vers l'intérieur et vers l'extérieur slideToggle, animation animer arrêter l'animation arrêter

巴扎黑

Libérer： 2017-06-30 11:15:34

original

1701 Les gens l'ont consulté

1.jquery masquer et afficher l'événement

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

Copier après la connexion

Afficher le rappel d'invite après le masquage

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

Copier après la connexion

2 Fondu entrant et sortant

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

Copier après la connexion

3. . Slide in L'exemple de glissement vers l'extérieur

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

Copier après la connexion

est le suivant :

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

Copier après la connexion

4. Animation animate

Tout d'abord, expliquez pourquoi vous devez appeler animate à la place. de modifier directement les propriétés css : utiliser animate peut modifier lentement le style de p, et l'effet d'animation est plus beau, tandis que la modification directe du css sera complétée directement par le chargement et le flash, et l'effet n'est pas bon.

Par défaut, la position de tous les éléments HTML est statique et ne peut pas être déplacée. Si vous souhaitez manipuler la position, n'oubliez pas de définir d'abord la propriété CSS position de l'élément sur relative, fixe ou absolue.

Exemple :

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

Copier après la connexion

Animation pas à pas

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

Copier après la connexion

Arrêter l'animation

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!