jQuery Etkileri

  • Önceki sayfa
  • Sonraki sayfa

jQuery gizli, göster, değiştirme, kaydırma ve özelleştirilmiş animasyon gibi etkiler oluşturabilir.

Kendi kendine deneyin

Bu jQuery etkisini deneyin:

CodeW3C.com - Önde gelen Web teknoloji eğitim siteleri

CodeW3C.com'da, ihtiyacınız olan tüm web sitesi inşa eğitim materyallerini bulabilirsiniz.

Buraya tıklayın

Örnek

jQuery hide()
Basit bir jQuery hide() işlevi gösterimi.
jQuery hide()
Bir diğer hide() gösterimi. Parçalı metni nasıl gizleyeceğinizi öğrenin.
jQuery slideToggle()
Basit bir kaydırma paneli etkisi gösterimi.
jQuery fadeTo()
Basit bir jQuery fadeTo() işlevi gösterimi.
jQuery animate()
Basit bir jQuery animate() işlevi gösterimi.

jQuery Gizleme ve Gösterme

hide() ve show() iki fonksiyonu kullanarak, jQuery HTML elementlerinin gizlenmesi ve gösterilmesini destekler:

Örnek

$\"#hide\".click(function(){
$\"p\".hide();
});
$\"#show\".click(function(){
$\"p\".show();
});

Kendi kendine deneyin

hide() ve show() her ikisi de iki seçmeli parametre ayarlar: speed ve callback.

Sözdizimi:

$\$(\"selector\").hide(\"speed\",\"callback\")
$\$(\"selector\").show(\"speed\",\"callback\")

speed Parametreler, gösterme veya gizleme hızını belirler. Bu değerleri ayarlayabilirsiniz: "slow", "fast", "normal" veya milisaniye.

callback Parametreler, hide veya show işlevleri tamamlanındıktan sonra çalıştırılacak olan fonksiyon adıdır. Daha fazla bilgi için, aşağıdaki bölümleri öğreneceksiniz callback Parametre bilgisi.

Örnek

$("button").click(function(){
$\"p\".hide(1000);
});

Kendi kendine deneyin

jQuery Değiştirme

jQuery toggle() işlevi, HTML elementlerinin görünürlük durumunu değiştirmek için show() veya hide() işlevlerini kullanır.

Görünür olan elementleri gizler, gizli olanları gösterir.

Sözdizimi:

$\$(\"selector\").toggle(\"speed\",\"callback\")

speed Bu değerleri ayarlayabilirsiniz: "slow", "fast", "normal" veya milisaniye.

Örnek

$("button").click(function(){
$\"p\".toggle();
});

Kendi kendine deneyin

callback Bu fonksiyonun tamamlanması ardından çalıştırılacak olan fonksiyon adıdır. Daha fazla bilgiyi, bu dersin altındaki bölümlerde öğreneceksiniz callback Parametre bilgisi.

jQuery kaydırma işlevleri - slideDown, slideUp, slideToggle

jQuery, aşağı yukarı kaydırma işlevlerini şu şekilde barındırır:

$\$(\"selector\").slideDown(\"speed\",\"callback\")
$\$(\"selector\").slideUp(\"speed\",\"callback\")
$(selector).slideToggle(speed,callback)

speed Bu değerleri ayarlayabilirsiniz: "slow", "fast", "normal" veya milisaniye.

callback Bu fonksiyonun tamamlanması ardından çalıştırılacak olan fonksiyon adıdır. Daha fazla bilgiyi, bu dersin altındaki bölümlerde öğreneceksiniz callback Parametre bilgisi.

slideDown() örneği

$(".flip").click(function(){
$(".panel").slideDown();
});

Kendi kendine deneyin

slideUp() örneği

$(".flip").click(function(){
$(".panel").slideUp();
})

Kendi kendine deneyin

slideToggle() örneği

$(".flip").click(function(){
$(".panel").slideToggle();
});

Kendi kendine deneyin

jQuery Fade Fonksiyonları - fadeIn(), fadeOut(), fadeTo()

jQuery aşağıdaki fade fonksiyonlarına sahiptir:

$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)

speed Bu değerleri ayarlayabilirsiniz: "slow", "fast", "normal" veya milisaniye.

fadeTo() fonksiyonundaki opacity Bu parametre, belirtilen şeffaflığa azaltmayı tanımlar.

callback Bu fonksiyonun tamamlanması ardından çalıştırılacak olan fonksiyon adıdır. Daha fazla bilgiyi, bu dersin altındaki bölümlerde öğreneceksiniz callback Parametre bilgisi.

fadeTo() örneği

$("button").click(function(){
$("div").fadeTo("slow",0.25);
});

Kendi kendine deneyin

fadeOut() örneği

$("button").click(function(){
$("div").fadeOut(4000);
});

Kendi kendine deneyin

jQuery Özel Animasyon

jQuery fonksiyonunun özel animasyon oluşturma grameri:

$(selector).animate({params},[duration],[easing],[callback])

Anahtar parametreler paramsAnimaasyon oluşturacak olan CSS özelliklerini tanımlar. Birden fazla bu tür özellik ayarlanabilir:

$(selector).animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

İkinci parametre durationAnlatım zamanı uygulanacak olan değerleri tanımlar. Ayarladığı değerler: "slow", "fast", "normal" veya milisaniye.

Örnek 1

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>

Kendi kendine deneyin

Örnek 2

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>

Kendi kendine deneyin

HTML elemanları varsayılan olarak statik konumlandırma yapar ve hareket ettirilemez.

Elemanın hareket edebilmesi için CSS position değerini relative veya absolute olarak ayarlayın.

jQuery Etki - Bu sayfadan

Fonksiyon Açıklama
$(seçici).hide() Seçilen elemanı gizleyin
$(seçici).show() Seçilen elemanı gösterin
$(seçici).toggle() Seçilen elemanı gizleme ve gösterme arasında geçiş yapın
$(seçici).slideDown() Seçilen elemanı aşağı kaydırarak gösterin
$(seçici).slideUp() Seçilen elemanı yukarı kaydırarak gizleyin
$(seçici).slideToggle() Seçilen elemana yukarı ve aşağı kaydırma etkisi uygulayın
$(seçici).fadeIn() Seçilen elemanı yavaşça parlatın
$(seçici).fadeOut() Seçilen elemanı aydınlatma
$(seçici).fadeTo() Seçilen elemanı belirtilen şeffaflığa yavaşça aydınlatın
$(seçici).animate() Seçilen elemana özelleştirilmiş animasyonlar uygulayın

Tam referans kılavuzuna ulaşmak için sitemize ziyaret edin jQuery Etki Kılavuzu。

  • Önceki sayfa
  • Sonraki sayfa