jQuery基本动画效果

1、show()

用于显示页面元素与之相对应的hide() 测试案例：

<p title="标题">测试</p>
<ul style="display: none"><li title='苹果'>苹果</li><li title='橘子'>橘子</li><li title='菠萝'>菠萝</li>
</ul>
点击显示
$('p').bind("click",function(){$("ul").show();
})点击切换效果
$('p').toggle(function(){$("ul").show();
},function(){$("ul").hide()
})

注意：这里可以加参数进去

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

注意这里toggle()的使用

$('#test').click(function(){$("ul").toggle();
})
————————————————
slideDown
$('p').toggle(function(){$("ul").slideUp()
},function(){$("ul").slideDown();
})

这里注意this关键字，昨天我们测试过不能用，因为this属于js的东西，但是能不能转为jQuery的东西呢

演示代码：

$('#test').toggle(function(){$(this).next().slideUp() ----注意这里和上边的写法不同之处
},function(){$(this).next().slideDown();
})注意的和之前的隐藏显示一样，这里也有简化版
$('#test').click(function(){$("ul").slideToggle()
})
——————————————
fadeIn    fadeOut---淡入淡出效果
$('#test').toggle(function(){$(this).next().fadeOut();
},function(){$(this).next().fadeIn();
})

注意：看API这里也有它自己的简洁写法，使用过程中多多注意

animate()

——觉得之前的动画效果不满意，好吧，我们看这里，自定义动画效果

自定义移动的案例：

<div id="test"></div>#test{position: absolute;width: 100px;height: 100px;border: 1px solid red;background-color: gray;}
$('#test').click(function(){$(this).animate({left:"500px"},3000)
})

注意：这里可以添加多个条件的

$('#test').click(function(){$(this).animate({left:"200px",height:"200px"},3000)
})

案例2：

<button id="left">?</button> <button id="right">?</button>
<div id="test"></div>$('#left').click(function(){$("#test").animate({left:"-500px"},3000)
})
$('#right').click(function(){$("#test").animate({left:"500px"},3000)
})