jquery ausblenden, Ereignis anzeigen und Rückruf auffordern, ein- und ausblenden, fadeToggle, ein- und ausblenden, slideToggle, Animation animieren, stoppen, Animation stoppen-js-Tutorial-php.cn

jquery ausblenden, Ereignis anzeigen und Rückruf auffordern, ein- und ausblenden, fadeToggle, ein- und ausblenden, slideToggle, Animation animieren, stoppen, Animation stoppen

巴扎黑

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

Original

1675 Leute haben es durchsucht

1.jquery Ereignis ausblenden und anzeigen

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

Nach dem Login kopieren

Nach dem Ausblenden sofortigen Rückruf anzeigen

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

Nach dem Login kopieren

2. Ein- und Ausblenden

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

Nach dem Login kopieren

3 . Slide in Das Beispiel für das Slide out

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

Nach dem Login kopieren

lautet wie folgt:

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

Nach dem Login kopieren

4. Animation animate

Erklären wir zunächst, warum animate anstelle von aufgerufen wird CSS-Eigenschaften direkt ändern: Durch die Verwendung von animate kann der Stil von p langsam geändert werden, und der Animationseffekt ist schöner, während die direkte Änderung von CSS direkt durch Laden und Flashen abgeschlossen wird und der Effekt nicht gut ist.

Standardmäßig ist die Position aller HTML-Elemente statisch und kann nicht verschoben werden. Wenn Sie die Position manipulieren möchten, denken Sie daran, zunächst die CSS-Eigenschaft position des Elements auf „relativ“, „fest“ oder „absolut“ festzulegen.

Beispiel:

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

Nach dem Login kopieren

Schritt-für-Schritt-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>

Nach dem Login kopieren

5. Animation stoppen

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonjquery ausblenden, Ereignis anzeigen und Rückruf auffordern, ein- und ausblenden, fadeToggle, ein- und ausblenden, slideToggle, Animation animieren, stoppen, Animation stoppen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!