jquery动画（1）

jQuery基本动画效果
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)
})

转载于:https://www.cnblogs.com/chjb/p/4298801.html