如何使標題加快每點擊使用jquery和javascript

我想使它每當你點擊標題它加快。然而，它要麼加速前幾次點擊或開始變得非常緩慢。我也嘗試將* = 999的符號更改爲+ =和 - =，並且我沒有發現任何不同的結果。請幫忙。如何使標題加快每點擊使用jquery和javascript

var x = 10000 
 
    //x is the speed of animate 
 
    //this is where the movement is defined for the heading 
 
function move() { 
 
    $("h1").animate({ 
 
     "left": "+=200px" 
 
    }, x).animate({ 
 
     "top": "+=200px" 
 
    }, x).animate({ 
 
     "left": "-=200px" 
 
    }, x).animate({ 
 
     "top": "-=200px" 
 
    }, x); 
 
    } 
 
    //this should make the heading move faster 
 
$("h1").click(function() { 
 
    move() 
 
    //this should make it move faster 
 
    x *= 999 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<h1 id="heading" style="position:absolute;">Watch the moving heading!</h1>

來源

2016-03-24 DanielB

你有適用於任何頭CSS？我們也可以看到嗎？ – Lewis

爲什麼CSS會相關？ –

我想知道，例如，如果頭已絕對定位與已定義的/最高值。 – Lewis

首先你x告訴你的動畫需要多長時間才能完成。所以10000意味着end after 10s而90000意味着end in 90s - 更大意味着更慢。

除了增加時間（*=，+=，++），你需要減少它（/=，-=，--）

我還添加了.finish()完成當前的動畫，並啓動開始，你可以，如果你刪除它喜歡。

var x = 10000; 
 

 
function move() { 
 
    $("h1").finish().animate({ 
 
     "left": "+=200px" 
 
    }, x).animate({ 
 
     "top": "+=200px" 
 
    }, x).animate({ 
 
     "left": "-=200px" 
 
    }, x).animate({ 
 
     "top": "-=200px" 
 
    }, x); 
 
    } 
 

 
$("h1").click(function() { 
 
    move(); 
 
    x -= 500; 
 
    x = Math.max(1, x); 
 
    console.log(x); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<h1 id="heading" style="position:absolute;">Watch the moving heading!</h1>

來源

2016-03-24 13:39:47 Justinas

幾件事情要注意。

1）要增加動畫的速度，您必須縮短動畫所用的時間。所以，你需要像x -= 300;和不做x *= 999

2）玩完現有動畫增加，並點擊h1當啓動一個新的。使用.finish()來完成正在運行的動畫。

3）搬開200個像素從左邊，然後從上挪開200個像素，現在你必須從原來的位置移回原來的位置，而不是-200，你必須使用left:0px和top:0px回遷到初始位置。

檢查工作演示。

var x = 1000 
 

 
    //x is the speed of animate 
 
    //this is where the movement is defined for the heading 
 
function move() { 
 
    
 
    $("h1").finish().animate({ 
 
     "left": "200px" 
 
    }, x).animate({ 
 
     "top": "200px" 
 
    }, x).animate({ 
 
     "left": "0px" 
 
    }, x).animate({ 
 
     "top": "0px" 
 
    }, x); 
 
    } 
 
    //this should make the heading move faster 
 
$("h1").click(function() { 
 
    move(); 
 
    //this should make it move faster 
 
    if(x > 100) x -= 300; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<h1 id="heading" style="position:absolute;">Watch the moving heading!</h1>

來源

2016-03-24 13:50:22

如何使標題加快每點擊使用jquery和javascript

回答

相關問題