hide和show
jQuery 中显示方法为:.show(),隐藏方法为:.hide()。
在无参数的时候,只是硬性的显示内容和隐藏内容
注意:.hide()方法其实就是在行内设置 CSS 代码:display:none; 而.show()方法要根据原来元素是区块还是内联来决定,如果是区块,则设置 CSS 代码:display:block; 如果是内联, 则设置 CSS 代码:display:inline;
$("div").click(function(){
$(this).hide(1000).siblings().show(1000);
})
$("div").hide(2000,function(){
console.log("aa");
}).show(1000);
abc();
function abc(){
$("div").hide(2000,function(){
$("div").show(2000,abc);
})
}
abc();
function abc(){
$("div").hide(2000).show(2000,abc);
}
toggle切换操作
$("div").click(function(){
$(this).toggle(2000);
})
slideUp、slideDown、slideToggle
$("div").click(function(){
$(this).slideUp(2000).slideDown(2000);
})
$("div").slideUp(2000).slideDown(2000);
$("div").click(function(){
$(this).slideToggle(2000);
})
fadeIn、fadeOut完全透明和不透明,fadeToggle自动切换
$("div").click(function(){
$(this).fadeToggle(2000);
})
animate 自定义动画
div{
width: 50px;
height: 50px;
background-color: red;
border: 1px solid #000000;
position: absolute;
}
<div>1</div>
$("div").animate({
width:100,
height:100
},2000).animate({
left:1000
},2000).animate({
top:500
},1000)
$("div").animate({
width:100,
height:100,
left:1000,
top:500
},1000,function(){
})