jQuery动画+上拉下拉+透明度

jQuery动画+上拉下拉+透明度

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: yellow;
        }
        .trans{
            transform: rotate(30deg);
        }
        .sca{
            transform: scale(1,2);
        }
    style>
    <script src="jQuery/jquery-1.12.0.min.js">script>
    <script>
        $(function () {
            $("#btn").click(function () {
                /*淡入淡出*/
//                $(".box").fadeOut(1000);
//                $(".box").fadeIn(2000);
                /*下拉上啦*/
//                $(".box").slideUp(2000);
//                $(".box").slideDown(2000);
                $(this).animate({"width":"300px","height":"300px"},2000,function () {
                    
                })
            });
            $(".box").animate({"width":"300px"},2000,function () {
                $(".box").animate({"height":"300px"},2000,function () {
                    $("#stop").animate({"width":"300px"})
                })
            });
            //暂停
            $("#stop").click(function(){
             $("#btn").stop();
             })
        })
    script>
head>
<body>
<button id="stop">button>
<div class="box">div>
<button id="btn">按钮button>
body>
html>

你可能感兴趣的:(html5)