一、jQuery的动画
1、jQuery自带的动画
1》变化的是width height opacity display
jQuery动画+创建jQuery变量
$("button:eq(2)").click(function () {
$("div").toggle();
});
});
2》变化的是height
//第二个动画，变化的是opacity display $(function () { $("button:eq(0)").click(function () { $("div").slideUp("slow");//卷起 fast normal slow }); $("button:eq(1)").click(function () { $("div").slideDown(1000);//放下 }); $("button:eq(2)").click(function () { $("div").slideToggle(1000); }); });
3》淡入淡出
//第三个动画：淡入淡出 $(function () { $("button:eq(0)").click(function () { $("div").fadeOut(1000); }); $("button:eq(1)").click(function () { $("div").fadeIn(1000); }); $("button:eq(2)").click(function () { $("div").fadeToggle(1000); }); $("button:eq(3)").click(function () { $("div").fadeTo(1000,0.3);//时间，定值，回调函数 }); }) 2、自定义动画
//自定义动画,该方法是异步的，因为底层使用了定时器 //animation(json,时间,回调函数); $(function () { $("button:eq(0)").click(function () { $("div").animate({ "width": 0 }, 100, function () { alert("运行完成"); }); }); }); 二、创建对象
1、回顾原生js中是如何创建对象
//原生js中创建对象 //第一种方式： // var p = document.createElement("p"); // p.innerHTML = "我是一个p"; // document.getElementsByTagName("div")[0].appendChild(p); //第二种方式 // document.getElementsByTagName("div")[0].innerHTML = "我是第二个p
"; //第三种方式 document.write("我是第三个P
"); 2、jQuery中创建元素的方式
//jQuery中创建元素的方式 var $p = $("我是jquery生成的第一个标签
"); //放到div中，在div末尾追加 // $("div").append($p);//在div的末尾追加p // $p.appendTo($("div"));//追加到div,也是在末尾加 //放在div中，在div的开头追加 // $("div").prepend($p);//在开头追加 // $p.prependTo($("div"));//在开头加 //在div的外边 // $("div").before($p);//前面 // $("div").after($p);//后边 //替换div内部 $("div").html($p); 3、注意：添加的已有元素相当于剪切。
案例：选中左边的，移动到右边，选中右边的，移动到左边
选中移动 水果摊
购物车
的