Pertanyaan melompat ke depan dalam animasi jQuery?


Apakah ada cara untuk melompat animasi jQuery maju / mundur dalam waktu?

Misalnya, jika saya telah menetapkan animasi pada elemen untuk mengambil 10 detik, dapatkah saya melompat ke '5 detik' ke dalam animasi itu? Lebih disukai, ini bisa ditetapkan dengan persentase.


4
2017-09-13 20:21


asal


Jawaban:


http://api.jquery.com/queue/ 

Anda dapat mencoba mengatur antrean di animasi Anda OR

jika Anda bisa memberikan contoh pasti Anda bisa menerima petunjuk yang bagus;)


0
2017-09-13 20:28



Anda dapat menghentikan animasi saat ini, mengatur status objek animasi menjadi separuh di antara kondisi awal dan status terakhirnya, lalu memulai animasi baru ke status akhir asli, tetapi disetel untuk separuh waktu.

Itu akan melompat ke posisi setengah animasi dan kemudian melanjutkan dari sana.

Berikut ini contoh kerja: http://jsfiddle.net/jfriend00/FjqKW/.


0
2017-09-13 20:49



Ini harus memiliki semua yang Anda inginkan tetapi fungsionalitas persentasenya:

Demo: http://jsfiddle.net/SO_AMK/MHV5k/

jQuery:

var time = 10000; // Animation speed in ms
var opacity = 0; // Final desired opacity


function jumpAnimate(setOpacityTo, newOpacity, speed){  // I created a function to simplify things
    $("#fade").css("opacity", setOpacityTo).animate({
        "opacity": newOpacity
    }, {
        duration: speed // I used speed instead of time because time is already a global variable
    });
}

$("#jump").click(function(){
    var goTo = $("#jump-to").val(); // Get value from the text input

    var setOpacity = (1 / time) * (time - goTo); /* The opacity that the element should be set at, i.e. the actual jump
    Math is as follows: initial opacity / the speed of the original animation in ms * the time minus the desired animation stop in ms (basically the remaining time past the desired point) */

    $("#fade").stop(); // Stop the original animation after the math is finished so that we have minimal delay

    jumpAnimate(setOpacity, opacity, time - goTo); // Start a new animation
});

jumpAnimate(1, opacity, time);​ // Start the initial animation

0
2017-09-13 21:32