1. 程式人生 > >JQuery操作div隱藏和顯示的4種動畫

JQuery操作div隱藏和顯示的4種動畫

//普通顯示 $(function(){ $("#ShowButton").click( function(){ if($("#ShowDiv").css("display")=='none'){ $("#ShowDiv").show(); $("#ShowDiv").html("show()<br>hide()"); $("#ShowButton").val("隱藏"
); }else{ $("#ShowDiv").hide(); $("#ShowButton").val("顯示"); } }); }); //動畫顯示-1 $(function(){ $("#ShowButton_1").click( function(){ if($("#ShowDiv").css("display"
)=='none'){ $("#ShowDiv").show(1000); $("#ShowDiv").html("show(1000)<br>hide(1000)"); $("#ShowButton_1").val("隱藏"); }else{ $("#ShowDiv").hide(1000); $("#ShowButton_1").val("顯示"); } }); }); //動畫顯示-2
$(function(){ $("#ShowButton_2").click( function(){ if($("#ShowDiv").css("display")=='none'){ $("#ShowDiv").slideDown(); $("#ShowDiv").html("slideDown()<br>slideUp()"); $("#ShowButton_2").val("隱藏"); }else{ $("#ShowDiv").slideUp(); $("#ShowButton_2").val("顯示"); } }); }); //動畫顯示-3 $(function(){ $("#ShowButton_3").click( function(){ if($("#ShowDiv").css("display")=='none'){ $("#ShowDiv").fadeIn(2000); $("#ShowDiv").html("fadeIn()<br>fadeOut()"); $("#ShowButton_3").val("隱藏"); }else{ $("#ShowDiv").fadeOut(2000); $("#ShowButton_3").val("顯示"); } }); });