学习目标:
再次学习jQuery动画的制作
学习内容:
1、语法:
$(selector).animate({params},speed,callback);
2、 jQuery animate() - 操作多个属性
代码如下:
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'xxx',
opacity:'xxx',
height:'xxx',
width:'xxx'
});
});
});
</script>
</head>
<body>
<button>begin to start</button>
默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
如果需要改变,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute
3、jQuery animate() - 使用队列功能
代码如下:
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'xxx',opacity:'0.5'},"slow");
div.animate({width:'xxx',opacity:'0.5'},"slow");
div.animate({height:'xxx',opacity:'0.5'},"slow");
div.animate({width:'xxx',opacity:'0.5'},"slow");
});
});
</script>
</head>
<body>
<button>begin to show</button>
默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!