JQuery操作div隱藏和顯示的4種動畫
阿新 • • 發佈:2019-02-09
//普通顯示
$(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("顯示");
}
});
});