jQuery05-动画

//动画
/*

1

2

3

4

    

#box{
    width:100px;
    height:100px;
    background:red;
    position:absolute;
}
.test{
    padding:5px;
    margin-right:5px;
    background:orange;
    float:left;
    display:none;
    
}


$(function(){
    $('.show').click(function(){
        $('#box').show(1000);//显示
    });
    
    $('.hide').click(function(){
        $('#box').hide(1000);//隐藏
    });
});

$(function(){
    $('.show').click(function(){
        $('#box').show('slow',function(){
            alert('显示完毕');
        });//显示
    });
    
    $('.hide').click(function(){
        $('#box').hide('slow');//隐藏
    });
});

//列队显示
$(function(){
    $('.show').click(function(){
        $('.test').first().show('fast',function testShow(){
            $(this).next().show('fast',testShow);
        });//显示
    });
    
    $('.hide').click(function(){
        $('#box').hide('slow');//隐藏
    });
});

//列队显示
$(function(){
    $('.show').click(function(){
        $('.test').first().show('fast',function testShow(){
            $(this).next().show('fast',testShow);
        });//显示
    });
    
    $('.hide').click(function(){
        $('.test').last().hide('fast',function testHide(){
            $(this).prev().hide('fast',testHide);
        });//隐藏
    });
});

//切换
$(function(){
    $('.toggle').click(function(){
        $('#box').toggle('slow');
    })
});

//滑动效果
$(function(){
    $('.toggle').click(function(){
        $('#box').slideUp('slow');
    })
});

$(function(){
    $('.toggle').click(function(){
        $('#box').slideDown('slow');
    })
});

//淡入淡出
*/
//自定义动画
/*
$(function(){
    $('.button').click(function(){
        $('#box').animate({
            width:'300px',
            height:'200px',
            opacity:'0.5',
            fontSize:'50px',
        });
    
    });
});

//传参
$(function(){
    $('.button').click(function(){
        $('#box').animate({
            width:'300px',
            height:'200px',
            opacity:'0.5',
            fontSize:'50px',
        },2000,function(){
            alert("动画执行完毕");
        });
    
    });
}

//位移运动
$(function(){
    $('.button').click(function(){
        $("#box").animate({
            left:'300px',
            top:'200px',
        });
    });
});

//列队动画
$(function(){
    $('.button').click(function(){
        $("#box").animate({
            width:'300px',
        },function(){
            $('#box').animate({
                height:'500px'
            });
        });
    });
});

//列队动画
$(function(){
    $('.button').click(function(){
        $("#box").animate({width:'300px'})
                 .animate({height:'200px'})
                 .animate({opacity:0.5})
                 .animate({fontSize:'50px'})    
    });
});
*/