Bu yazımızda jQuery’de animasyon özelliğini nasıl açıp kapatabileceğimizi göstereceğim.
JQuery.fx.off özelliği, tüm animasyonları global olarak devre dışı bırakmak / etkinleştirmek için kullanılır. Varsayılan olarak false değeri alır. Bu şekilde animasyonların normal olarak çalışmasına izin verilir.
Biz bu değeri true yaparak, tüm animasyonları devre dışı bırakabiliriz. Bu şekilde ayarlandığında animasyonlar, animasyonsuz bir şekilde son halini alırlar.
İki farklı şekilde kullanabiliriz. Bunlar:
|
1 2 3 4 5 6 7 8 9 10 |
//Birinci yöntem jQuery.fx.off = true|false; //İkinci yöntem $.fx.off = true|false; |
⇒ Şimdi 1 div etiketi ve 3 button etiketi yazalım.
⇒ “Animasyonu başlat” butonuna tıklandığında div etiketi için yazmış olduğumuz animasyonu başlatalım. Varsayılan olarak animasyonların çalışmasına izin verildiği için herhangi bir problem yaşamayacağız.
⇒ “Animasyonları devre dışı bırak” butonuna tıklayalım ve sonrasında tekrar “Animasyonu başlat” butonuna tıklayalım.
⇒ Bu sefer yazdığımız animasyon kodları çalışmayacaktır. Çünkü JQuery.fx.off özelliğine true değeri atamış olduk.
⇒ Eğer “Animasyonları etkin hale getir” butonuna tıklayarak JQuery.fx.off özelliğine tekrar false değeri atarsak animasyon kodlarımız tekrar çalışacaktır.
Html Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<button id="disable">Animasyonları devre dışı bırak ( $.fx.off = true )</button> <button id="enable">Animasyonları etkin hale getir ( $.fx.off = false )</button> <br /> <button id="animate">Animasyonu başlat</button> <div id="box"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> #box{ width:100px; height:100px; background-color:blueviolet; } button { padding: 10px; margin-bottom:18px; background-color: tomato; color: #fff; border: none; cursor: pointer; font-size: 16px; } </style> |
jQuery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<script> $(document).ready(function() { $("#disable").click(function () { jQuery.fx.off = true; }); $("#enable").click(function () { jQuery.fx.off = false; }); $("#animate").click(function () { $("div").animate({ opacity: '0.5', height: '150px', width: '100%' },5000); $("div").animate({ opacity: '1', height: '100px', width: '100px' },5000); }); }); </script> |
Butonlara tıklayarak uygulamamızı inceleyebilirsiniz.
Umarım sizin için faydalı bir yazı olmuştur.
Şu yazılar da ilginizi çekebilir.
jQuery fadeOut(), fadeIn(), fadeToggle(), fadeTo() Metodları ve Kullanımları
jQuery addClass(), removeClass(), toggleClass() Metodları ve Kullanımları
Yeni bir yazımda görüşmek üzere.
