jQuery显示与隐藏、淡入淡出、透明度、滑动等效果

Html

Css

显示

隐藏

显示/隐藏

Hello jQuery

Hello World

 div {
	width:40px;
	height:40px;
	float:left;
	background-color:blue;
	margin-right:10px;
}
#content {
	padding:50px;
	display:none;
}
#flipshow,#content,#fliphide,#fliptoggle {
	padding:5px;
	text-align:center;
	background-color:aquamarine;
	border:1px solid green;
}

//jQuery特效之显示与隐藏
$(function() {
    for (var i = 0; i < 5; i++) {
        $("<div>").appendTo(document.body);
    };
    $("div").click(function() {
        $(this).hide(1000);
    });
    //jQuery特效之淡入淡出与透明度
    $("#in").on("click", function() {
        $("#div1").fadeIn(1000);
        $("#div2").fadeIn(2000);
        $("#div3").fadeIn(1500);
    });
    $("#out").click(function() {
        $("#div1").fadeOut(1000);
        $("#div2").fadeOut(1000);
        $("#div3").fadeOut(1000);
    });
    $("#toggle").on("click", function() {
        $("#div1").fadeToggle(1000);
        $("#div2").fadeToggle(1000);
        $("#div3").fadeToggle(1000);
    });
    //透明度设置 0是完全透明，1是完全不透明
    $("#to").click(function() {
        $("#div1").fadeTo(1000, 0.5);
        $("#div2").fadeTo(1000, 1);
        $("#div3").fadeTo(1000, 0);
    });
    //jQuery特效之滑动
    $("#flipshow").click(function() {
        $("#content").slideDown(1000);
    });
    $("#fliphide").click(function() {
        $("#content").slideUp(1000);
    });
    $("#fliptoggle").click(function() {
        $("#content").slideToggle(1000);
    });
    //jQuery特效之回调
    $("#btn").click(function() {
        $("p").hide(1000, function() {
            alert("回调完成");
        });
    });
});
//综合
$("p").css("color", "red").slideUp(1000).slideDown(1000).slideUp(2000);

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

jQuery显示与隐藏、淡入淡出、透明度、滑动等效果



代码描述：jQuery的简单特效，主要是显示与隐藏、淡入淡出、透明度、滑动以及回调。

更新时间：2023-08-26 13:03:59
显示与隐藏
显示和隐藏主要是利用了hide、show、以及toggle方法
淡入淡出与透明度
淡入淡出是利用fadein、fadeout、以及fadetoggle方法
透明度则是利用了fadeto方法，fadeto方法的第二个参数表示透明度。
其中0表示完全透明，1表示完全不透明
滑动
滑动利用的是slidedown、slideup、以及slidetoggle方法
回调
回调是在动画特效执行之后再去执行某个操作的过程

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

灬与非

相关代码

jQuery显示与隐藏、淡入淡出、透明度、滑动等效果

最新