`

Jquery动画效果

jquery 
阅读更多
1. Jquery动画效果

1.1) Jquery隐藏与显示DOM

1.2) Jquery淡入和淡出DOM

1.3) Jquery滑动DOM

1.4) Jquery动画

1.5) JquerycallBack回调方法

1.6) Jquery暂停动画 

chap05/demo01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#b1").click(function(){
            $("#p1").show();
        });
        $("#b2").click(function(){
            $("#p1").hide();
        });
        $("#b3").click(function(){
            $("#d1").fadeOut();
        });
        $("#b4").click(function(){
            $("#d1").fadeIn();
        });
        $("#b5").click(function(){
            // $("#d1").fadeToggle();
            // $("#d1").fadeToggle("slow");
            $("#d1").fadeToggle(10000);
        });
        $("#b6").click(function(){
            $("#d1").fadeTo("slow",0.1);
            $("#d2").fadeTo("slow",0.5);
            $("#d3").fadeTo("slow",0.9);
        });
        $("#b7").click(function(){
            $("#d4").slideDown("slow");
        });
        $("#b8").click(function(){
            $("#d4").slideUp("slow");
        });
        $("#b9").click(function(){
            $("#d5").animate({left:'500px'},'slow');
        });
        $("#b10").click(function(){
            $("#d5").animate({
                left:'500px',
                opacity:0.5,
                height:'150px',
                width:'150px'
                },'slow');
        });
        $("#b11").click(function(){
            $("#d5").animate({
                left:'500px',
                opacity:0.5,
                height:'+=150px',
                width:'+=150px'
                },'slow');
        });
        $("#b12").click(function(){
            $("#p2").show(function(){
                alert("小日本出来了！");
            });
        });
        $("#b13").click(function(){
            $("#d6").animate({left:'500px'},'slow');
        });
        $("#b14").click(function(){
            $("#d6").stop();
        });
    });
</script>
</head>
<body>
<input type="button" value="出来" id="b1"/>
<input type="button" value="滚" id="b2"/>
<p id="p1">小日本</p>
<hr/>
<input type="button" value="淡出" id="b3"/>
<input type="button" value="淡入" id="b4"/>
<input type="button" value="淡入淡出开关" id="b5"/>
<input type="button" value="透明度" id="b6"/>
<div id="d1" style="width: 100px;height: 100px;background-color: red;margin: 10px;"></div>
<div id="d2" style="width: 100px;height: 100px;background-color: green;margin: 10px;"></div>
<div id="d3" style="width: 100px;height: 100px;background-color: blue;margin: 10px;"></div>
<hr/>
<input type="button" value="向下滑动" id="b7"/>
<input type="button" value="向上滑动" id="b8"/>
<div id="d4" style="background-color: gray;display: none;height: 100px;width: 500px;">
    <p>Java</p>
    <p>Java掉渣天！</p>
</div>
<hr/>
<input type="button" value="向左移动" id="b9"/>
<input type="button" value="动画效果2" id="b10"/>
<input type="button" value="动画效果3" id="b11"/>
<!-- <div id="d5" style="width: 100px;height: 100px;background-color: red;margin: 10px;position: absolute;"></div> -->
<hr/>
<input type="button" value="回调事件" id="b12"/>
<p id="p2" style="display: none;">小日本</p>
<hr/>
<input type="button" value="向左移动" id="b13"/>
<input type="button" value="停止" id="b14"/>
<div id="d6" style="width: 100px;height: 100px;background-color: red;margin: 10px;position: absolute;"></div>
</body>
</html>
分享到：
| Jquery事件操作
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics