jquery效果- 顯示和隱藏 淡入淡出 滑動 隱藏

jQuery 效果- 隱藏和顯示:hide() 和 show()

    規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒
    您可以使用 toggle() 方法來切換 hide() 和 show() 方法。
    parents  找到每個span元素的所有祖先元素。 $("span").parents()
    找到每個span的所有是p元素的祖先元素。 $("span").parents("p")

<script>
    $(function(){  3         $("button").click(function(){  4             $("p").hide(800);  5  })  6  })  7     $(function(){  8         $("button").click(function(){  9             $("p").toggle(); 10  }) 11  }) 12     $(document).ready(function(){ 13         $(".ex").click(function(){ 14             $(this).parents(".ex").hide("slow"); 15  }); 16  }); 17 </script>

 

jQuery 效果- 淡入淡出:

jQuery fadeIn() 用於淡入已隱藏的元素。
jQuery fadeOut() 方法用於淡出可見元素。
jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。
jQuery fadeTo() 方法允許漸變為給定的不透明度（值介於 0 與 1 之間）。

<script> $(function(){ $("button").click(function(){ $("div1").fadeToggle(2000); }) }) $(function(){ $("button").click(function(){ $(".div1").fadeTo("slow", 0.45); }) }) </script>

 

jQuery 效果- 滑動:

    jQuery slideDown() 方法用於向下滑動元素。
    jQuery slideUp() 方法用於向上滑動元素。
    jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。

 <script> $(function(){ $(".div").click(function(){ $(".div2").slideToggle("slow"); }) }) $(function(){ $(".div").slideUp("fast",function(){ alert("456789"); }) }) </script>

jQuery 效果- 動畫:

    jQuery animate() 方法允許您創建自定義的動畫。
    jQuery stop() 方法用於停止動畫或效果
    Callback 函數在當前動畫 100% 完成之后執行。

<script> $(function(){ $("button").click(function(){ $("div").animate({left,'200px'}) $("div").animate({ width:"+=150px",height:"+=200px" //寬高無限循環遞增
 }) }) }) </script>