jQuery 样式跟动画

CSS 操作

基础样式设置

$("li").css("color", "red");
// or
$("li").css({ color: "red" });

多样式设置

$("li").css("color", "red").css("font-size", "2em");
// or
$("li").css({ color: "red", "font-size": "2em" });

获取样式

$("li").css("color");

class 操作

新增类

$("li").addClass("test");

移除类

$("li").removeClass("test");

判断是否拥有某个类

$("li").hasClass("test");

切换类

$("li").toggleClass("test");

属性操作

获取属性

$("input#name").attr("type");

设置属性

$("a").attr("title", "提示文本");
// or
$("a").attr({ title: "提示文本", href: "#" });

动画

显示动画

// 格式 show([speed], [callback])
$("div").show(1000);
// or
$("div").show(1000, function () {
  console.log("end");
});

隐藏动画

// 格式 hide([speed], [callback])
$("div").hide(1000);
// or
$("div").hide(1000, function () {
  console.log("end");
});

滑入动画

// 格式 slideDown([speed], [callback])
$("div").slideDown(1000);
// or
$("div").slideDown(1000, function () {
  console.log("end");
});

滑出动画

// 格式 slideUp([speed], [callback])
$("div").slideUp(1000);
// or
$("div").slideUp(1000, function () {
  console.log("end");
});

滑动切换动画

// 格式 slideToggle([speed], [callback])
$("div").slideToggle(1000);
// or
$("div").slideToggle(1000, function () {
  console.log("end");
});

淡入动画

// 格式 fadeIn([speed], [callback])
$("div").fadeIn(1000);
// or
$("div").fadeIn(1000, function () {
  console.log("end");
});

淡出动画

// 格式 fadeOut([speed], [callback])
$("div").fadeOut(1000);
// or
$("div").fadeOut(1000, function () {
  console.log("end");
});

自定义动画

// 格式 animate(动画属性,持续时间,动画曲线,回调函数)
$("div").animate({ left: 200, color: "red" }, 8000, "linear", function () {
  console.log("end");
});

动画队列

$("div")
  .css("position", "absolute")
  .animate({ left: "200px" }, 1000)
  .animate({ top: "200px" }, 1000)
  .animate({ left: "0px" }, 1000);

控制动画

stop 停止动画

// 格式 $(selector).stop(stopAll,goToEnd)
// 参数一是否停止被选元素的所有加入队列的动画
// 参数二是否跳转到当前动画的最终效果
$("div").stop(true, true);

• 课程的配套案例 如下
• https://download.csdn.net/download/qq_32466937/12324269