Jquery slideUp metodu ile Resim Gizleme

Bu makalemizde, Jquery sideUp() metodu ile tıkladığımız resim ekrandan kaybolacak. Çok az kod satırı yazarak Jquery ile animasyonlar hazırlayabileceğimizin en güzel kanıtı sanırım böyle örnekler. Birkaç tane jpeg formatında resim ekleyeceğiz, hangisinin üzerine tıklanırsa o resim yukarı doğru kayarak ekrandan kaybolacak. 

Aşağıdaki iki satır kod ile bu işlemi başaracağız. Web sayfamızdaki tüm img yani imaj nesnelerini seçecek ve seçilen nesnenin slideUp() metodu ile kayarak kaybolmasını sağlayacak.

$( "img" ).click(function() {
  $( this ).slideUp();
});



Aşağıdaki kodları bir editörde yazarak çalıştırabilirsiniz.


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tıklama</title>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
 
<img src="1.jpg" alt="Birinci resim" width="400"><br/>
<img src="2.jpg" alt="İkinci resim" width="400">
 
 
<script>
$( "img" ).click(function() {
  $( this ).slideUp();
});
</script>
 
</body>
</html>

Tüm kodları aşağıdaki linkte tıklayarak bilgisayarınıza indirebilirsiniz.
KODLARI İNDİR


Mutlu kodlamalar,
Oğuzhan TAŞ
Mayıs, 2015
Bookmark and Share
Dil Değiştir(Change Language)
Kategoriler
Kütüphane Programı
En çok Okunan 18 Makale