Öne Çıkan Yayın

Uzak Masaüstü Bağlantısı ve Modem Port Ayarı

İyi günler bu konumuzda uzak masaüstü bağlantısı ve modem port ayarını anlatacağım. Normalde uzak masaüstü bağlantısı ayarını açtığımızda ye...

27 Eylül 2012 Perşembe

Jquery .FadeIn()

Merhaba arkadaşlar bu dersimizde jquery .FadeIn() özelliğini anlatacağım. .FadeIn() özelliği veridiğimiz nesneyi belirlediğimiz sürede flashlı bir şekilde görünür hale getirir. Örn. "lk" Id'li linke tıkladığımızda oluşturduğumuz "lkdv" Id'li divi görünür hale getirelim.

Body tagları arasında link ve div tagımızı oluşturuyoruz.

<a href="javascript:void(0);" id="lk">tıklayın..</a>
<div id="lkdv" style="width:200px; height:100px; background-color:red; display:none;">&nbsp;</div>

Linkimizi oluşturduk ve "href " parametresini tanımsız olarak girdik yani tıklandıgında bir işlem yapılmayacak. Divi oluşturduk "id" tanımladık ve "style" görünmez tanımladık.

Şimdi scriptimizi yazıyoruz.
<script type="text/javascript">
 $(document).ready(function(){
  $('#lk').click(function(){
   $('#lkdv').fadeIn("slow");
  });
 });
</script>

Şuanda ekranda olan görünmez bir divi linke tıkladğımızda "slow" olarak görünür yaptık. aşağıda html görünümü ve örneği görebilirsiniz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Jquery .FadeIn()</title>
  <script src='http://code.jquery.com/jquery-1.8.0.min.js' type='text/javascript'></script>
 
  <script type="text/javascript">
  $(document).ready(function(){
    $('#lk').click(function(){
     $('#lkdv').fadeIn("slow");
    });
  });
  </script>
  </head>

  <body>
 <a href="javascript:void(0);" id="lk">tıklayın..</a>
 <div id="lkdv" style="width:200px; height:100px; background-color:red; display:none;">&nbsp;
</div>
</body>
</html>

<== Örnek Çalışma ==>
tıklayın..

Hiç yorum yok:

Yorum Gönder