效果学习（基本参数都可以写毫秒）

基本（没有透明效果）

show([s,[e],[fn]])   显示隐藏的匹配元素。   display:none
hide([s,[e],[fn]])   隐藏显示的元素
toggle([s],[e],[fn])    在所有 <p> 元素上进行隐藏和显示之间的切换：

淡入淡出（类似于那种透明效果）
fadeIn([s],[e],[fn])  淡入已隐藏的元素。  　 类似于show显示隐藏的匹配元素 display:none的css也可以用
fadeOut([s],[e],[fn]) 用于淡出可见元素      类似于hide隐藏显示的元素
fadeTo([[s],o,[e],[fn]]) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
fadeToggle([s,[e],[fn]])  方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

fadeIn

$("#message").html("<p>联系方式已成功提交！</p>")
        .append("<p>Script design</p>")
        .hide()
        .fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='yes.ico' />");
        });

fadeTo

$("button").click(function(){

  $("#div1").fadeTo("slow",0.15);

  $("#div2").fadeTo("slow",0.4);

  $("#div3").fadeTo("slow",0.7);

});

fadeToggle() 方法

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});
</script>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button>
<br><br>

<div id="div1" style="width:80px;height:80px;"></div>
<br>
<div id="div2" style="width:80px;height:80px;"></div>
<br>
<div id="div3" style="width:80px;height:80px;"></div>

jQuery 滑动方法

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

• slideDown()         方法用于向下滑动元素
• slideUp()             方法用于向上滑动元素。
• slideToggle()     方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

slideDown()

slideUp()

<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  $("p").slideUp();
  });
  $(".btn2").click(function(){
  $("p").slideDown();
  });
});
</script>

<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>

slideToggle()

<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  $("p").slideToggle();
  });
});
</script>

<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>

 

 

转载于:https://www.cnblogs.com/lsc-boke/p/5234201.html