从零玩转jQuery-动画效果

  1. 云栖社区>
  2. 博客>
  3. 正文

从零玩转jQuery-动画效果

极客江南 2018-04-20 21:57:00 浏览905
展开阅读全文

显示、隐藏动画

  • 显示动画
  • 内部实现原理根据当前操作的元素是块级还是行内决定, 块级内部调用display:block;,行内内部调用display:inline;
// 编写jQuery相关代码
$("button").eq(0).click(function () {
    // $("div").css("display", "block");
    // 注意: 这里的时间是毫秒
    $("div").show(1000, function () {
        // 作用: 动画执行完毕之后调用
        alert("显示动画执行完毕");
    });
});
  • 隐藏动画
$("button").eq(1).click(function () {
    // $("div").css("display", "none");
    $("div").hide(1000, function () {
        alert("隐藏动画执行完毕");
    });
});
  • 切换动画(显示变隐藏,隐藏变显示)
$("button").eq(2).click(function () {
    $("div").toggle(1000, function () {
        alert("切换动画执行完毕");
    });
});
  • 注意事项:
    • show(1000, function () {};) 第一个参数单位是毫秒, 1000毫秒等于1秒
    • 默认的动画时长是400毫秒
    • 除了指定毫秒以外还可以指定三个预设参数 slow、normal、fast
      • slow本质是600毫秒
      • normal本质是400毫秒
      • fast本质是200毫秒
    • 其它两个方法同理可证

展开、收起动画

  • 参数、注意事项和显示隐藏动画一模一样, 只不过动画效果不一样而已
  • slideDown([s],[e],[fn])
  • 展开动画
$("button").eq(0).click(function () {
    $("div").slideDown(1000, function () {
        alert("展开完毕");
    });
});
  • 收起动画
$("button").eq(1).click(function () {
    $("div").slideUp(1000, function () {
        alert("收起完毕");
    });
});
  • 切换动画(展开变收起,收起变展开)
$("button").eq(2).click(function () {
    $("div").slideToggle(1000, function () {
        alert("收起完毕");
    });
});

淡入、淡出动画

  • 参数、注意事项和显示隐藏动画一模一样, 只不过动画效果不一样而已
  • fadeIn([s],[e],[fn])
  • 淡入动画
$("button").eq(0).click(function () {
    $("div").fadeIn(1000, function () {
        alert("淡入完毕");
    });
});
  • 淡出动画
$("button").eq(1).click(function () {
    $("div").fadeOut(1000, function () {
        alert("淡出完毕");
    });
});
  • 切换动画(显示变淡出,不显示变淡入)
$("button").eq(2).click(function () {
    $("div").fadeToggle(1000, function () {
        alert("切换完毕");
    });
});
  • 淡入到指定透明度动画
  • 可以通过第二个参数,淡入到指定的透明度(取值范围0~1)
$("button").eq(3).click(function () {
    $("div").fadeTo(1000, 0.2, function () {
        alert("淡入完毕");
    })
});

自定义动画

  • 有时候jQuery中提供的集中简单的固定动画无法满足我们的需求, 所以jQuery还提供了一个自定义动画方法来满足我们复杂多变的需求

  • animate(p,[s],[e],[fn])

/*
第一个参数: 接收一个对象, 可以在对象中修改属性
第二个参数: 指定动画时长
第三个参数: 指定动画节奏, 默认就是swing
第四个参数: 动画执行完毕之后的回调函数
*/
$(".two").animate({
    marginLeft: 500
}, 5000, "linear", function () {
    // alert("自定义动画执行完毕");
});
  • 每次开始运动都必须是初始位置或者初始状态,如果想在上一次位置或者状态下再次进行动画可以使用累加动画
$("button").eq(1).click(function () {
    $(".one").animate({
        width: "+=100"
    }, 1000, function () {
        alert("自定义动画执行完毕");
    });
});
  • 同时操作多个属性,自定义动画会执行同步动画,多个被操作的属性一起执行动画
$(".one").animate({
    width: 500,
    height: 500
}, 1000, function () {
    alert("自定义动画执行完毕");
});

动画队列

  • 多个动画方法链式编程,会等到前面的动画执行完毕再依次执行后续动画
$("div").slideDown(1000).slideUp(1000).show(1000);

$(".one").slideDown(1000,function () {
    $(".one").slideUp(1000, function () {
        $(".one").show(1000);
    });
});
  • 但是如果后面紧跟一个非动画方法则会被立即执行
// 立刻变为黄色,然后再执行动画
$(".one").slideDown(1000).slideUp(1000).show(1000).css("background", "yellow");
  • 如果想颜色再动画执行完毕之后设置, 1.使用回调 2.使用动画队列
$(".one").slideDown(1000,function () {
    $(".one").slideUp(1000, function () {
        $(".one").show(1000, function () {
            $(".one").css("background", "yellow")
        });
    });
});

$(".one").slideDown(1000).slideUp(1000).show(1000).queue(function () {
    $(".one").css("background", "yellow")
});
  • 注意点:
    • 动画队列方法queue()后面不能继续直接添加queue()
    • 如果想继续添加必须在上一个queue()方法中next()方法
$(".one").slideDown(1000).slideUp(1000).show(1000).queue(function (next) {
    $(".one").css("background", "yellow");
    next(); // 关键点
}).queue(function () {
    $(".one").css("width", "500px")
});

动画相关方法

$(".one").animate({
    width: 500
    // height: 500
}, 1000).delay(2000).animate({
    height: 500
}, 1000);
// 立即停止当前动画, 继续执行后续的动画
// $("div").stop();
// $("div").stop(false);
// $("div").stop(false, false);

// 立即停止当前和后续所有的动画
// $("div").stop(true);
// $("div").stop(true, false);

// 立即完成当前的, 继续执行后续动画
// $("div").stop(false, true);

// 立即完成当前的, 并且停止后续所有的
$("div").stop(true, true);

网友评论

登录后评论
0/500
评论
极客江南
+ 关注