recherche

Maison >interface Web >js tutoriel >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

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

巴扎黑
巴扎黑original
2017-06-30 11:15:341703parcourir

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

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

Afficher le rappel d'invite après le masquage

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

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不淡化

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");    //点击显示，再点击收起

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>

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>

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>

Arrêter l'animation

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

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Quelques méthodes d'effets spéciaux courantes et exemples d'utilisation que jquery doit connaître (organisés)Article suivant：Quelques méthodes d'effets spéciaux courantes et exemples d'utilisation que jquery doit connaître (organisés)

Articles Liés

Voir plus