jQuery基本动画效果

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)
})