jq隐藏显示，淡入淡出，上下滑动，图片动画

1、隐藏/显示,

$(‘div’).hide();//隐藏

<div id="fang" style="width: 100px;height: 100px;background-color: #0000FF;display: block;">

</div>

<button id="b" type="button">点击</button>

$('#b').click(function(){
$('#fang').hide();//点击按钮时div隐藏
 });

$(‘div’).show();//显示

$(‘div’).toggle();//如果显示点击就隐藏，如果隐藏就显示

2、淡入淡出

$(div).fadeIn(speed,callback);淡入，一个慢慢的过程显示

$(‘#id’).fadeIn(1000,function(){alert(‘aa’);});//结束淡入动作后弹框aa

 

$(div).fadeOut(speed,callback);淡出

$(div).fadeToggle(speed,callback);淡入淡出切换；

$('#b').click(function(){//反复淡入淡出
$('#fang').fadeToggle(2000,function(){
$('#b').click();//调用自身
})
})

 

$(div).fadeTo(speed,opacity,callback);渐变为给定的不透明度

3、滑动

$(div).slideDown(speed速度,callback回调函数，执行完之后再执行的函数);向下滑动

$(div).slideUp(speed,callback);向上滑动

$(div).slideToggle(speed,callback);滑动之间切换

4、动画

$(div).animate({params},speed时间,callback);

可以使用相对值：

$(div).animate({

left:’200px’,

height: ‘+=150px’,

});

$(div).animate({

left:’200px’,

height: ‘+=150px’,

}，4000，function);

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）

队列功能：多个不同的动画会按照队列顺序执行；

$(div).stop()用于动画或效果完成前对它们进行停止；写在按钮上会点击会使动画随时停止