Cara menggunakan EFFES pada JavaScript

Question

Pada artikel kali ini kita akan membahas tentang efek fadeIn, fadeOut dan fadeTo pada jquery. Fungsi efek ini biasanya digunakan untuk transisi elemen pada web, baik muncul maupun lenyap secara berkala(memudar).

Table of Contents Show

Definition and Usage
Try it Yourself - Examples

Seperti artikel tentang animate sebelumnya, kita menggunakan file contoh yang sama dengan yang ada di artikel Tutorial dasar menggunakan jquery untuk mempercantik halaman web.
Bagi yang belum tahu cara dasar menggunakan jquery, monggo simak link diatas. ;)

Ok, cekidot, langsung to de poin.
Fungsi efek fadeIn dan fadeOut mempunyai struktur yang sama yaitu:

[code lang="javascript"]$(elemen).fadeOut(durasi);[/code]

dimana elemen adalah elemen yang dipanggil, sedangkan durasi adalah waktu yang diperlukan bagi elemen untuk menghilang(fadeOut) atau tampil(fadeIn) dalam milidetik.

Untuk langsung mencobanya, silahkan edit file html yang tadi saya bahas. Ubah script html-nya jadi:

[code lang="javascript"]$('#kotak').fadeOut(1000);[/code]

Simpan dan refresh untuk lihat hasilnya, kalau tidak ada masalah, maka seharusnya #kotak secara bertahap memudar hingga menghilang. Sekarang coba tambahkan .fadeIn(1000) setelah fungsi fadeOut, hingga menjadi:

[code lang="javascript"]$('#kotak').fadeOut(1000).fadeIn(1000);[/code]

Dan lihat hasilnya. :)
Tidak ada masalah? kalau tidak terjadi apa-apa, cek disini solusinya. ;)

Ok, sekarang kita lanjut ke fungsi fadeTo.
Agak berbeda dari kedua fungsi sebelumnya, fungsi fadeTo mempunyai 2 properties yaitu durasi dan opacity. Sehingga bentuknya kayak gini:

[code lang="javascript"]$(elemen).fadeTo(durasi,opacity);[/code]

Contoh terapan:

[code lang="javascript"]$('#kotak').fadeTo(1000 , 0.5);[/code]

Nah, nilai dari opacity adalah antara 0 sampai 1, dimana semakin kearah 0, objek semakin menghilang, semakin kearah 1 objek semakin jelas (0=full transparan, 1=tidak transparan).

Misalnya dalam contoh diatas, opacity bernilai 0,5 yang artinya object setengah menghilang setengah nampak(transparan). Untuk lebih jelasnya, coba terapkan ke file html contoh kita tadi. ;)
Sekian artikel tentang fungsi fadeIn, fadeOut, dan fadeTo jquery, untuk artikel tentang fungsi-fungsi jquery lainnya bisa agan temukan di submenu jquery di menu programming.
Selamat belajar. :) dan jangan lupa +1 ;)

P.S:Copas silahkan, tapi jangan lupa cantumkan sumber. ;)

Pada tutorial kali ini anda akan Mengenal Effect FadeTo Dan Fadeout Pada Jquery dengan cara praktek langsung menggunakan jquery.

Jquery adalah sebuah library yang bertujuan untuk memanipulasi sebuah HTML atau tampilan website agar lebih terlihat menarik, jquery ini sangat amat berguna untuk keperluan pembuatan website karena beragamnya animasi yang bisa di buat oleh jquery.

oke effect fade To sendiri memiliki fungsi untuk mengatur opacity suatu element dengan durasi interval tertentu. jadi dengan bantuan effect ini kita mengatur opacity tanpa harus dengan menggunakan CSS.

Silahkan salin code berikut :

<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>


<button id="faddTo">fadd-To</button>
<button id="faddNor">fadd-To-normal</button>
<p> gue bisa memudar, coba aja lo klik cuk....</p>


<script type="text/javascript">
	$(document).ready(function(){

		$('#faddTo').click(function(event){

			$('p').fadeTo('slow',0.2);
		});

		$('#faddNor').click(function(event){

			$('p').fadeTo('slow',1);
		});
	});
</script>
</body>
</html>

setelah kaliansalin lalu silahkan jalankan pada browser masing-masing.

oke itu saja untuk kali ini , semoga bisa menambah wawasan anda mengenai jquery, sampai bertemu pada artikel selanjutnya.

❮ jQuery Effect Methods

Example

Gradually change the opacity of all <p> elements:

$("button").click(function(){
$("p").fadeTo(1000, 0.4);
});

Try it Yourself »

Definition and Usage

The fadeTo() method gradually changes the opacity, for selected elements, to a specified opacity (fading effect).

Syntax

$(selector).fadeTo(speed,opacity,easing,callback)

Parameter	Description
speed	Required. Specifies the speed of the fading effect. Possible values: milliseconds "slow" "fast"
opacity	Required. Specifies the opacity to fade to. Must be a number between 0.00 and 1.00
easing	Optional. Specifies the speed of the element in different points of the animation. Default value is "swing" Possible values: "swing" - moves slower at the beginning/end, but faster in the middle "linear" - moves in a constant speed Tip: More easing functions are available in external plugins
callback	Optional. A function to be executed after the fadeTo() method is completed To learn more about callback, visit our jQuery Callback chapter

Try it Yourself - Examples

fadeTo() - Using the callback parameter
How to use the callback parameter when fading in and out an element.

❮ jQuery Effect Methods

Saya suka yang Ibu tapi, saya pikir saya punya solusi yang lebih baik menggunakan idenya.

//Fade In.
element.style.opacity = 0;
var Op1 = 0;
var Op2 = 1;
var foo1, foo2;
foo1 = setInterval(Timer1, 20);
function Timer1()
{
    element.style.opacity = Op1;
    Op1 = Op1 + .01;
    console.log(Op1); //Option, but I recommend it for testing purposes.
    if (Op1 > 1)
    {
        clearInterval(foo1);
        foo2 = setInterval(Timer3, 20);
    }
}

Solusi ini menggunakan persamaan tambahan tidak seperti solusi Ibu, yang menggunakan persamaan multiplikasi. Cara kerjanya adalah dibutuhkan kenaikan waktu (t), kenaikan opacity (o), dan batas opacity (l) dalam persamaan, yaitu: (T = waktu fade dalam milidetik) [T = (l/o) * t]. "20" mewakili kenaikan waktu atau interval (t), ".01" mewakili kenaikan opacity (o), dan 1 mewakili batas opacity (l). Ketika Anda memasukkan angka-angka dalam persamaan Anda mendapatkan 2000 milidetik (atau 2 detik). Berikut ini adalah log konsol:

0.01
0.02
0.03
0.04
0.05
0.060000000000000005
0.07
0.08
0.09
0.09999999999999999
0.10999999999999999
0.11999999999999998
0.12999999999999998
0.13999999999999999
0.15
0.16
0.17
0.18000000000000002
0.19000000000000003
0.20000000000000004
0.21000000000000005
0.22000000000000006
0.23000000000000007
0.24000000000000007
0.25000000000000006
0.26000000000000006
0.2700000000000001
0.2800000000000001
0.2900000000000001
0.3000000000000001
0.3100000000000001
0.3200000000000001
0.3300000000000001
0.34000000000000014
0.35000000000000014
0.36000000000000015
0.37000000000000016
0.38000000000000017
0.3900000000000002
0.4000000000000002
0.4100000000000002
0.4200000000000002
0.4300000000000002
0.4400000000000002
0.45000000000000023
0.46000000000000024
0.47000000000000025
0.48000000000000026
0.49000000000000027
0.5000000000000002
0.5100000000000002
0.5200000000000002
0.5300000000000002
0.5400000000000003
0.5500000000000003
0.5600000000000003
0.5700000000000003
0.5800000000000003
0.5900000000000003
0.6000000000000003
0.6100000000000003
0.6200000000000003
0.6300000000000003
0.6400000000000003
0.6500000000000004
0.6600000000000004
0.6700000000000004
0.6800000000000004
0.6900000000000004
0.7000000000000004
0.7100000000000004
0.7200000000000004
0.7300000000000004
0.7400000000000004
0.7500000000000004
0.7600000000000005
0.7700000000000005
0.7800000000000005
0.7900000000000005
0.8000000000000005
0.8100000000000005
0.8200000000000005
0.8300000000000005
0.8400000000000005
0.8500000000000005
0.8600000000000005
0.8700000000000006
0.8800000000000006
0.8900000000000006
0.9000000000000006
0.9100000000000006
0.9200000000000006
0.9300000000000006
0.9400000000000006
0.9500000000000006
0.9600000000000006
0.9700000000000006
0.9800000000000006
0.9900000000000007
1.0000000000000007
1.0100000000000007

Perhatikan bagaimana opacity mengikuti jumlah peningkatan opacity dari 0,01 seperti dalam kode. Jika Anda menggunakan kode yang dibuat Ibu,

//I made slight edits but keeped the ESSENTIAL stuff in it.
var op = 0.01;  // initial opacity
var timer = setInterval(function () {
    if (op >= 1){
        clearInterval(timer);
    }
    element.style.opacity = op;
    op += op * 0.1;
}, 20);

anda akan mendapatkan angka-angka ini (atau yang serupa) di log konsol Anda. Inilah yang saya dapat.

0.0101
0.010201
0.01030301
0.0104060401
0.010510100501
0.010615201506009999
0.0107213535210701
0.0108285670562808
0.010936852726843608
0.011046221254112044
0.011156683466653165
0.011268250301319695
0.011380932804332892
0.01149474213237622
0.011609689553699983
0.011725786449236983
0.011843044313729352
0.011961474756866645
0.012081089504435313
0.012201900399479666
0.012323919403474463
0.012447158597509207
0.0125716301834843
0.012697346485319142
0.012824319950172334
0.012952563149674056
0.013082088781170797
0.013212909668982505
0.01334503876567233
0.013478489153329052
0.013613274044862343
0.013749406785310966
0.013886900853164076
0.014025769861695717
0.014166027560312674
0.014307687835915801
0.01445076471427496
0.01459527236141771
0.014741225085031886
0.014888637335882205
0.015037523709241028
0.015187898946333437
0.01533977793579677
0.015493175715154739
0.015648107472306286
0.01580458854702935
0.015962634432499644
0.01612226077682464
0.016283483384592887
0.016446318218438817
0.016610781400623206
0.01677688921462944
0.016944658106775732
0.01711410468784349
0.017285245734721923
0.017458098192069144
0.017632679173989835
0.01780900596572973
0.01798709602538703
0.018166966985640902
0.01834863665549731
0.018532123022052285
0.018717444252272807
0.018904618694795535
0.01909366488174349
0.019284601530560927
0.019477447545866538
0.0196722220213252
0.019868944241538455
0.02006763368395384
0.02026831002079338
0.020470993121001313
0.020675703052211326
0.02088246008273344
0.021091284683560776
0.021302197530396385
0.02151521950570035
0.021730371700757353
0.021947675417764927
0.022167152171942577
0.022388823693662
0.022612711930598623
0.022838839049904608
0.023067227440403654
0.02329789971480769
0.023530878711955767
0.023766187499075324
0.024003849374066077
0.02424388786780674
0.024486326746484807
0.024731190013949654
0.024978501914089152
0.025228286933230044
0.025480569802562344
0.025735375500587968
0.025992729255593847
0.026252656548149785
0.026515183113631283
0.026780334944767597
0.027048138294215273
0.027318619677157426
0.027591805873929
0.02786772393266829
0.028146401171994972
0.028427865183714922
0.02871214383555207
0.02899926527390759
0.029289257926646668
0.029582150505913136
0.029877972010972267
0.030176751731081992
0.030478519248392812
0.03078330444087674
0.031091137485285508
0.031402048860138365
0.03171606934873975
0.03203323004222715
0.03235356234264942
0.03267709796607591
0.03300386894573667
0.03333390763519403
0.03366724671154597
0.03400391917866143
0.03434395837044805
0.03468739795415253
0.03503427193369406
0.035384614653031
0.035738460799561306
0.03609584540755692
0.03645680386163249
0.03682137190024882
0.03718958561925131
0.03756148147544382
0.03793709629019826
0.03831646725310024
0.038699631925631243
0.03908662824488755
0.039477494527336426
0.03987226947260979
0.040270992167335894
0.04067370208900925
0.04108043910989934
0.04149124350099834
0.04190615593600832
0.042325217495368404
0.04274846967032209
0.04317595436702531
0.04360771391069556
0.044043791049802515
0.04448422896030054
0.04492907124990354
0.04537836196240258
0.045832145582026605
0.04629046703784687
0.04675337170822534
0.047220905425307595
0.04769311447956067
0.04817004562435628
0.04865174608059984
0.04913826354140584
0.0496296461768199
0.0501259426385881
0.05062720206497398
0.05113347408562372
0.05164480882647996
0.05216125691474476
0.05268286948389221
0.053209698178731134
0.05374179516051845
0.05427921311212363
0.05482200524324487
0.05537022529567732
0.05592392754863409
0.056483166824120426
0.05704799849236163
0.05761847847728525
0.0581946632620581
0.05877660989467868
0.059364375993625464
0.05995801975356172
0.060557599951097336
0.06116317595060831
0.06177480771011439
0.06239255578721554
0.0630164813450877
0.06364664615853857
0.06428311262012396
0.0649259437463252
0.06557520318378844
0.06623095521562633
0.0668932647677826
0.06756219741546042
0.06823781938961503
0.06892019758351117
0.06960939955934628
0.07030549355493974
0.07100854849048914
0.07171863397539403
0.07243582031514798
0.07316017851829945
0.07389178030348245
0.07463069810651728
0.07537700508758245
0.07613077513845827
0.07689208288984285
0.07766100371874128
0.0784376137559287
0.07922198989348798
0.08001420979242287
0.0808143518903471
0.08162249540925057
0.08243872036334307
0.0832631075669765
0.08409573864264626
0.08493669602907272
0.08578606298936345
0.08664392361925709
0.08751036285544966
0.08838546648400417
0.08926932114884421
0.09016201436033265
0.09106363450393598
0.09197427084897535
0.0928940135574651
0.09382295369303975
0.09476118322997015
0.09570879506226986
0.09666588301289256
0.09763254184302148
0.0986088672614517
0.09959495593406621
0.10059090549340688
0.10159681454834095
0.10261278269382436
0.1036389105207626
0.10467529962597022
0.10572205262222992
0.10677927314845222
0.10784706587993674
0.10892553653873611
0.11001479190412347
0.1111149398231647
0.11222608922139635
0.11334835011361032
0.11448183361474643
0.11562665195089389
0.11678291847040283
0.11795074765510685
0.11913025513165793
0.1203215576829745
0.12152477325980425
0.12274002099240229
0.12396742120232632
0.12520709541434957
0.12645916636849308
0.127723758032178
0.12900099561249978
0.13029100556862477
0.13159391562431103
0.13290985478055414
0.1342389533283597
0.13558134286164328
0.1369371562902597
0.1383065278531623
0.13968959313169393
0.14108648906301088
0.142497353953641
0.1439223274931774
0.14536155076810917
0.14681516627579025
0.14828331793854815
0.14976615111793362
0.15126381262911295
0.15277645075540408
0.15430421526295812
0.1558472574155877
0.15740572998974356
0.158979787289641
0.1605695851625374
0.16217528101416276
0.16379703382430438
0.16543500416254742
0.1670893542041729
0.16876024774621462
0.17044785022367676
0.17215232872591352
0.17387385201317265
0.17561259053330439
0.17736871643863744
0.1791424036030238
0.18093382763905405
0.1827431659154446
0.18457059757459904
0.18641630355034502
0.1882804665858485
0.19016327125170698
0.19206490396422404
0.19398555300386627
0.19592540853390494
0.197884662619244
0.19986350924543644
0.20186214433789082
0.20388076578126973
0.20591957343908243
0.20797876917347324
0.21005855686520797
0.21215914243386005
0.21428073385819865
0.21642354119678064
0.21858777660874845
0.22077365437483593
0.2229813909185843
0.22521120482777013
0.22746331687604782
0.2297379500448083
0.23203532954525638
0.23435568284070896
0.23669923966911605
0.2390662320658072
0.24145689438646528
0.24387146333032994
0.24631017796363325
0.24877327974326957
0.25126101254070227
0.2537736226661093
0.2563113588927704
0.2588744724816981
0.26146321720651505
0.2640778493785802
0.266718627872366
0.26938581415108964
0.27207967229260055
0.27480046901552657
0.27754847370568186
0.28032395844273866
0.28312719802716607
0.28595847000743774
0.2888180547075121
0.2917062352545872
0.2946232976071331
0.2975695305832044
0.3005452258890364
0.3035506781479268
0.3065861849294061
0.3096520467787002
0.3127485672464872
0.31587605291895204
0.31903481344814155
0.322225161582623
0.3254474131984492
0.3287018873304337
0.33198890620373805
0.33530879526577545
0.3386618832184332
0.34204850205061754
0.3454689870711237
0.34892367694183496
0.35241291371125333
0.35593704284836586
0.3594964132768495
0.363091377409618
0.3667222911837142
0.3703895140955513
0.37409340923650686
0.37783434332887195
0.38161268676216065
0.38542881362978226
0.3892831017660801
0.3931759327837409
0.3971076921115783
0.40107876903269407
0.405089556723021
0.4091404522902512
0.4132318568131537
0.41736417538128523
0.4215378171350981
0.42575319530644906
0.43001072725951356
0.43431083453210867
0.43865394287742976
0.4430404823062041
0.44747088712926614
0.4519455960005588
0.45646505196056436
0.46102970248017
0.4656399995049717
0.47029639950002144
0.47499936349502164
0.47974935712997185
0.48454685070127157
0.4893923192082843
0.4942862424003671
0.4992291048243708
0.5042213958726145
0.5092636098313407
0.5143562459296541
0.5194998083889507
0.5246948064728402
0.5299417545375685
0.5352411720829442
0.5405935838037736
0.5459995196418114
0.5514595148382295
0.5569741099866118
0.5625438510864779
0.5681692895973427
0.5738509824933161
0.5795894923182493
0.5853853872414317
0.5912392411138461
0.5971516335249846
0.6031231498602344
0.6091543813588367
0.615245925172425
0.6213983844241493
0.6276123682683908
0.6338884919510748
0.6402273768705855
0.6466296506392913
0.6530959471456843
0.6596269066171412
0.6662231756833126
0.6728854074401457
0.6796142615145472
0.6864104041296927
0.6932745081709896
0.7002072532526995
0.7072093257852266
0.7142814190430788
0.7214242332335097
0.7286384755658448
0.7359248603215033
0.7432841089247183
0.7507169500139654
0.7582241195141051
0.7658063607092461
0.7734644243163386
0.7811990685595019
0.789011059245097
0.7969011698375479
0.8048701815359234
0.8129188833512826
0.8210480721847955
0.8292585529066434
0.8375511384357098
0.8459266498200669
0.8543859163182677
0.8629297754814503
0.8715590732362648
0.8802746639686274
0.8890774106083137
0.8979681847143969
0.9069478665615408
0.9160173452271562
0.9251775186794278
0.9344292938662221
0.9437735868048843
0.9532113226729332
0.9627434358996625
0.9723708702586591
0.9820945789612456
0.9919155247508581
1.0018346799983666
1.0118530267983503

Perhatikan bahwa tidak ada pola yang terlihat. Jika Anda menjalankan kode Ibu, Anda tidak akan pernah tahu berapa lama fade itu. Anda harus mengambil timer dan menebak dan memeriksa 2 detik. Meskipun demikian, kode Ibu memang membuat fade yang bagus di Nice (mungkin berfungsi untuk fade out. Saya tidak tahu karena saya belum menggunakan fade out). Kode saya juga akan berfungsi untuk menghilang. Katakan saja Anda ingin 2 detik untuk menghilang. Anda dapat melakukannya dengan kode saya. Berikut ini tampilannya:

//Fade out. (Continued from the fade in.
function Timer2()
{
    element.style.opacity = Op2;
    Op2 = Op2 - .01;
    console.log(Op2); //Option, but I recommend it for testing purposes.
    if (Op2 < 0)
    { 
        clearInterval(foo2);
    }
}

Yang saya lakukan adalah mengubah opacity menjadi 1 (atau sepenuhnya buram). Saya mengubah kenaikan opacity menjadi -,01 sehingga akan mulai menjadi tidak terlihat. Terakhir, saya mengubah batas opacity menjadi 0. Ketika menyentuh batas opacity, timer akan berhenti. Sama seperti yang terakhir, kecuali ia menggunakan 1 bukan 0. Ketika Anda menjalankan kode, berikut ini yang seharusnya terlihat seperti log konsol.

.99
0.98
0.97
0.96
0.95
0.94
0.9299999999999999
0.9199999999999999
0.9099999999999999
0.8999999999999999
0.8899999999999999
0.8799999999999999
0.8699999999999999
0.8599999999999999
0.8499999999999999
0.8399999999999999
0.8299999999999998
0.8199999999999998
0.8099999999999998
0.7999999999999998
0.7899999999999998
0.7799999999999998
0.7699999999999998
0.7599999999999998
0.7499999999999998
0.7399999999999998
0.7299999999999998
0.7199999999999998
0.7099999999999997
0.6999999999999997
0.6899999999999997
0.6799999999999997
0.6699999999999997
0.6599999999999997
0.6499999999999997
0.6399999999999997
0.6299999999999997
0.6199999999999997
0.6099999999999997
0.5999999999999996
0.5899999999999996
0.5799999999999996
0.5699999999999996
0.5599999999999996
0.5499999999999996
0.5399999999999996
0.5299999999999996
0.5199999999999996
0.5099999999999996
0.49999999999999956
0.48999999999999955
0.47999999999999954
0.46999999999999953
0.4599999999999995
0.4499999999999995
0.4399999999999995
0.4299999999999995
0.4199999999999995
0.4099999999999995
0.39999999999999947
0.38999999999999946
0.37999999999999945
0.36999999999999944
0.35999999999999943
0.3499999999999994
0.3399999999999994
0.3299999999999994
0.3199999999999994
0.3099999999999994
0.2999999999999994
0.28999999999999937
0.27999999999999936
0.26999999999999935
0.25999999999999934
0.24999999999999933
0.23999999999999932
0.22999999999999932
0.2199999999999993
0.2099999999999993
0.1999999999999993
0.18999999999999928
0.17999999999999927
0.16999999999999926
0.15999999999999925
0.14999999999999925
0.13999999999999924
0.12999999999999923
0.11999999999999923
0.10999999999999924
0.09999999999999924
0.08999999999999925
0.07999999999999925
0.06999999999999926
0.059999999999999255
0.04999999999999925
0.03999999999999925
0.02999999999999925
0.019999999999999248
0.009999999999999247
-7.528699885739343e-16
-0.010000000000000753

Seperti yang Anda lihat, pola 0,01 masih ada di fade out. Kedua pudar halus dan tepat. Saya harap kode-kode ini membantu Anda atau memberi Anda wawasan tentang topik tersebut. Jika Anda memiliki tambahan atau saran, beri tahu saya. Terima kasih telah meluangkan waktu untuk melihat ini!

kode javascript