欢迎来到-个人主页,希望本页面可以帮到您,您也可以给我在线留言,反馈建议,我愿意倾听您的声音... 留言

jQuery动画:淡入、淡出、展开、收缩

2019-06-14 14:0

淡入
 $(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeIn();
        $("#div2").fadeIn("slow");
        $("#div3").fadeIn(3000);
    });
});
淡出
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeOut();
        $("#div2").fadeOut(1500);
        $("#div3").fadeOut(3000);
    });
}); 
淡入淡出
$(document).ready(function(){
    $("button").hover(function(){
        $("#div3").fadeToggle();
        $("#div2").fadeToggle();
        $("#div1").fadeToggle();
    });
}); 
淡入(淡出)到透明度
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeTo(3000,0.15);
        $("#div2").fadeTo(1500,0.4);
        $("#div3").fadeTo(0,0.7);
    });
}); 


滑动展开
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideDown("slow");
  });
});
滑动关闭
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideUp("slow");
  });
});
滑动展开关闭
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle(50);
  });
});