Heim > Artikel > Web-Frontend > jquery ausblenden, Ereignis anzeigen und Rückruf auffordern, ein- und ausblenden, fadeToggle, ein- und ausblenden, slideToggle, Animation animieren, stoppen, Animation stoppen

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

巴扎黑Original: 2017-06-30 11:15:341654Durchsuche

1.jquery Ereignis ausblenden und anzeigen

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

Nach dem Ausblenden sofortigen Rückruf anzeigen

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

2. Ein- und Ausblenden

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

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

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

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>

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>

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>

5. Animation stoppen

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

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einige gängige Spezialeffektmethoden und Anwendungsbeispiele, die JQuery kennen muss (organisiert)Nächster Artikel：Einige gängige Spezialeffektmethoden und Anwendungsbeispiele, die JQuery kennen muss (organisiert)

In Verbindung stehende Artikel

Mehr sehen