jquery动画
拓展 ： $(‘.artList :eq(2)’)这是一个后代选择器index从0 开始
选出来的是.artList的第三个子元素
$(‘.artList:eq(2)’)选出来的是第三个.artList元素
动画效果show() 和 hide()
Show(speed,[callback]) hide(speed,[callback])
方法中的speed 表示执行动画时的速度，有三个默认值 slow 、normal、fast
对应的速度分别是 0.6 0.4 0.2秒。也可以直接输入数字eg: 3000 表示3000毫秒
[callback]为动画完成时执行的回调函数，该函数每个元素执行一次
Eg : $(function(){
var link = $('.list a');
var hide = $('.list :eq(2)');
link.click(function(){
if($(this).html() == '显示'){
$(this).html('隐藏');
hide.show();
}else{
$(this).html('显示');
hide.hide();
}
//console.log(hide,link,this);
//hide 和 link 为jQuery对象，this是一个a标签的DOM对象
})
})
toggle()方法
1.toggle() 无参数
2.(有逻辑参数)toggle(switch) switch 是一个布尔值，当值为true显示元素，false隐藏元素
3.(动画效果)toggle(speed,[callback]);
无论是show() 和hide()还是toggle(),当以动画切换页面元素可见状态是，
其元素的width、height、padding、margin属性都将以动画效果展示
slideDown(speed,[callback])和slideUp(speed,[callback]);
slideDown(speed,[callback]) 将选择元素的高度向下增大
slideUp(speed,[callback]) 将选择元素的高度向上减小
slideToggle(speed,[callback]) 根据显示状态自动切换
淡入淡出 fadeIn(speed,[callback])与fadeOut(speed,[callback])
http://jquery.cuishifeng.cn/fadeIn.html
http://jquery.cuishifeng.cn/fadeOut.html
fadeTo(speed,opacity,[callback])方法
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
<div class="divFrame">
<div class="Title">
<select name="" id="">
<option value="0.2">0.2</option>
<option value="0.4">0.4</option>
<option value="0.6">0.6</option>
<option value="0.8">0.8</option>
<option value="1.0" selected="selected">1.0</option>
</select>
</div>
<div class="divContent"><img src="img/2.jpg" alt="monkey"></div>
</div>
$(function(){
var img = $('img');
var sel = $('select');
sel.click(function(){
var flt = $(this).val();//这里的值就相当于this.value的值
img.fadeTo(3000,flt);
// console.log(this.value);//只有jQuery对象才有val()方法
// console.log(this);//要想调用val()方法必须把this包装成jQuery对象
})
})
自定义动画
简单动画
animate(params , [duration] , [easing] , [callback])
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
callback:在动画完成时执行的函数，每个元素执行一次。
注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.
