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

浏览：1153次- 评论：1次- 发布时间：2023-08-26

Html

Css

显示

隐藏

显示/隐藏

Hello jQuery

Hello World

//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

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

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

显示与隐藏
显示和隐藏主要是利用了hide、show、以及toggle方法
淡入淡出与透明度
淡入淡出是利用fadein、fadeout、以及fadetoggle方法
透明度则是利用了fadeto方法，fadeto方法的第二个参数表示透明度。
其中0表示完全透明，1表示完全不透明
滑动
滑动利用的是slidedown、slideup、以及slidetoggle方法

回调

回调是在动画特效执行之后再去执行某个操作的过程

讨论这个常用代码（1）回答他人问题或分享心得会奖励牛币

Lv2 入门

ba***ap

2023年10月27日

谢谢 :78

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取