1.jQuery动画效果,隐藏和显示。
两个方法:hide()“隐藏” show()“显示”
JQuery动画效果,隐藏和显示
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("p").hide();
})
$("#button2").click(function() {
$("p").hide();
})
})
</script>
语法:
(
s
e
l
e
c
t
o
r
)
.
h
i
d
e
(
s
p
e
e
d
.
c
a
l
l
b
a
c
k
)
语
法
:
(selector).hide(speed.callback) 语法:
(selector).hide(speed.callback)语法:(selector).show(speed.callback)
callback参数:是隐藏或显示完成后执行的函数名称。
$(document).ready(function(){
$("#button1").click(function(){
$("p").hide(500);
alert("恭喜你,显示完成")
})
$("#button2").click(function() {
$("p").show(200,function(){
alert("恭喜你,显示完成")
})
}
语法:$(selector).toggle(speed.callback)
speed参数规定参数隐藏和显示的速度,取值为"show"“fast”.毫秒(1秒等于1000毫秒)
callback参数:是隐藏或显示完成后执行的函数名称。
$("#button3").click(function() {
$("p").toggle(1000,function(){
$("p").css({color:"yellow"})
})
2.Jquery滑动和动画
两个方法:slideDow() toggleDoe()
点击我,滑动显示或者隐藏面板
Hello JQuery
<script>
$(document).ready(function(){
$("#slide").click(function(){
$("#panel").slideToggle()
})
})
</script>
3.JQuery动画效果,动画
animate()方法用于创建自定义的动画。
语法:
$(selector),animate({params},speed,callback)
必须的params参数定义形成动画的css属性
开始动画
默认情况下所有的HTML元素有一个静态的位置,且是不可能移动的,如果需要改变,那么须将元素的position属性设置为absolute,relative,fixed
<script>
$(document).ready(function() {
$("button").click(function () {
$("div").animate({left:"200px"},1000,function(){
$("div").css({background:"yellow"})
})
})
})
</script>
4.操作多个属性:
animate();使用相对值
<script>
$(document).ready(function(){
$("#slide").click(function() {
$("div").animate({
left:"200px",opacity:"0.5",height:"160px",width:"160px"
})
})
})
</script>
------------------逆战班