JQuery – kuidas animeerida üles kerimist ja lahtrisse kerimist?

javascript

JQueryl on mugav funktsioon prototüüp animeerida, mis võtab esimeseks parameetriks esimesed lõplikud CSS -i atribuudid ja teise parameetrina kiiruse, nt "kiire", "aeglane" või määratud ajavahemik. Kolmas parameeter on valikuline tagasihelistamine pärast animatsiooni käivitamist. lõpetanud.

var properties = { color: red; };
$('div').animate(properties, "fast", function() {});

Oma isiklikul veebisaidil kujundasin hiljuti lehe väljavaate ümber, et muuta see täielikult mobiilikasutajasõbralikuks. Ekraani fikseeritud kohtades on kaks linki, ‘Navigeerimine’ ja ‘Ülemine’.

Navigeerimine

Navigeerimismenüü asub lehe põhisisu järel ja seetõttu tuleks defineerida div näiteks id=’navigate’. Seejärel lisage järgmine JQuery kood.

$("a[href='#navigate']").click(function(){
    $("html, body").stop().animate(
        {scrollTop:$("div#navigate").offset().top}, "slow");
        return false;
    })
});

Üles

Kõigepealt peaksite määrama ankru nt

Asetage see kohe pärast ja lisage järgmine JQuery kood:

$("a[href='#top']").click(function(){
    $("html, body").stop().animate(
        {scrollTop:0}, "slow");
        return false;
    })
});

kerige