jquery20--animate() : 運動的方法

時間 2019-11-17

標籤 jquery20 jquery animate 運動方法欄目 JQuery 简体版

原文原文鏈接

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>
#div1{ width:200px; height:200px; background:red; display:none;}
</style>
<script src="jquery-2.0.3.js"></script>
<script>

定義一些變量
tweeners = {};      √
function createFxNow(){}   √  
function createTween(){}   √
function Animation(){}     √
function propFilter(){}    √
jQuery.Animation = jQuery.extend( Animation, {   √
    tweener
    prefilter
});
function defaultPrefilter(){}   √
function Tween(){}   √
Tween.prototype = {  √
    init
    cur
    run
};
Tween.propHooks = {};   √
jQuery.each([ "toggle", "show", "hide" ], function(){});   √
jQuery.fn.extend({
    fadeTo      √
    animate     √
    stop         √
    finish       √
});
function genFx(){}     √
jQuery.each({   √
    slideDown
    slideUp
    slideToggle
    fadeIn
    fadeOut
    fadeToggle
}, function() {});
jQuery.speed = function(){};     √
jQuery.easing = {     √
    linear
    swing
};
jQuery.timers = [];              √
jQuery.fx.tick = function(){};    √
jQuery.fx.timer = function(){};    √
jQuery.fx.interval = 13;     √
jQuery.fx.start = function(){};   √
jQuery.fx.stop = function(){};   √
jQuery.fx.speeds = {}; √*/   

show
hide
toggle
slideDown
slideUp
slideToggle
fadeIn
fadeOut
fadeToggle
fadeTo

$(function(){
    
    $('input').click(function(){
        
        $('#div1').hide(1000);   //改變width height opacity
        $('#div1').show(1000);   //改變width height opacity
        $('#div1').toggle(1000); 
        $('#div1').slideUp(1000);//向上收起
        $('#div1').slideDown(1000);//向下展開
        $('#div1').slideToggle(1000);  //height
        $('#div1').fadeIn(1000,0.5);
        $('#div1').fadeOut(1000,0.5);
        $('#div1').fadeToggle(1000);   //opacity
        
        //寬度變成400，執行時間，linear勻速的，回調
        $('#div1').animate({ width : 400 },4000,'linear',function(){
            alert(123);
        });
        $('#div1').animate({ width : 'hide' , height : 'hide' , opacity : 'hide' },1000,'linear',function(){
            alert(123);
        });
        
        $('#div1').animate({ height : 'toggle' },1000,'linear',function(){
            alert(123);
        });
        $('#div1').fadeTo(1000,0.5);
        $('#div1').animate({ opacity : 0.5 },1000,'linear',function(){
        });
    });
});
</script>
</head>

<body>
<input type="button" value="點擊">
<div id="div1"></div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>
#div1{ width:200px; height:200px; background:red; position:absolute;}
</style>
<script src="jquery-2.0.3.js"></script>
<script>
$(function(){
    $('input').click(function(){
    //3個入隊操做fx
        $('#div1').animate({ width : 300 },1000);
        $('#div1').animate({ height : 300 },1000);
        $('#div1').animate({ left : 300 },1000);
    });
    
    //jQuery.fx.off = true;  //關閉頁面全部的運動
    $('input').click(function(){
        $('#div1').animate({ opacity : 0.5 },1000,'linear',function(){
        });
        //配置寫運動
        $('#div1').animate({ width : 400 },{
            duration : 'slow',  //速度慢速
            easing : 'linear',  //勻速
            complete : function(){  //完成回調
                alert(111);
            }
        });
    });
});
</script>
</head>

<body>
<input type="button" value="點擊">
<div id="div1"></div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>
#div1{ width:20px; height:200px; background:red; position:absolute;}
</style>
<script src="jquery-2.0.3.js"></script>
<script>
$(function(){
    $('input').click(function(){
        $('#div1').animate({ width : '50%' },2000);//屏幕的一半，tweeners處理的
        $('#div1').animate({ width : '+=200' },2000);
        $('#div1').animate({ 'marginLeft' : 200 },2000);   //margin-left -> marginLeft
        
        $('#div1').animate({ 'margin' : 200 },2000);   //marginLeft marginTop marginBottom marginRight
        
        $('#div1').animate({ 'width' : [200,'linear'] , 'height' : [20,'swing'] },2000);
        
        $('#div1').animate({ 'width' : 200 , 'height' : 20 },{
            
            specialEasing : {
                'width' : 'linear',
                'height' : 'swing'
            }
            
        });
        
    });
    
});

</script>
</head>

<body>
<input type="button" value="點擊">
<div id="div1"></div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute;}
</style>
<script src="jquery-2.0.3.js"></script>
<script>
$(function(){
    $('input').click(function(){
        $('#div1').animate({ 'width' : 300 },{
            queue : false
        }).animate({ 'height' : 300 },{});
        
        $('#div1').animate({ 'width' : 300 },5000);
        
        $('#div1').animate({ 'width' : 300 },{
            step：function(A){
                CONSOLE.LOG(A);//每次位置的變化值
            }
            done : function(){
                console.log(123);
            }
        });
    });
});

</script>
</head>

<body>
<input type="button" value="點擊">
<div id="div1"></div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>
#div1{ width:100px; height:30px; background:red; }
#div2{ width:100px; height:30px; background:red; margin-top:20px;}
#div3{ width:100px; height:30px; background:red; margin-top:20px;}
</style>
<script src="jquery-2.0.3.js"></script>
<script>
$(function(){
    $('input').click(function(){
        $('#div1').animate({width : 500} , 2000 , 'linear');
        $('#div2').animate({width : 500} , 2000 , 'swing');
        $('#div3').animate({width : 500} , 2000 , 'miaov');
    });
});

</script>
</head>

<body>
<input type="button" value="點擊">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>
#div1{ width:100px; height:100px; background:red; }
#div2{ width:100px; height:30px; background:red; margin-top:20px;}
#div3{ width:100px; height:30px; background:red; margin-top:20px;}
</style>
<script src="jquery-2.0.3.js"></script>
<script>
$(function(){
    $('input').eq(0).click(function(){
        $(document.documentElement).animate({ scrollTop : 600 },2000);
        $('#div1').animate({ width : 300 },2000).animate({ height : 300 },2000);
    });
    
    $('input').eq(1).click(function(){
        $(document.documentElement).animate({ scrollTop : 600 },2000);
        $('#div1').stop();  //默認的，中止當前運動，不會影響隊列的後續運動
        $('#div1').stop(true);//後面運動也中止
        $('#div1').stop(true,true);  //會中止當即轉到當前運動的結束位置
        $('#div1').finish();//會中止當即轉到全部運動的結束位置
    });
});

</script>
</head>

<body style="height:2000px;">
<input type="button" value="點擊"><input type="button" value="中止運動">
<div id="div1"></div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。