fadeIn metodu kullanımı ile ilgili bir örnek içeren jquery yazısıdır.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fadeIn Metodu Kullanımı - jQuery</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
<p id="yazi">Buraya Tıkla</p>
<div id="kare">
</div>
</div>
</body>
</html>
script.js
$("document").ready(function() {
$('#yazi').click(function() {
$('#kare').fadeIn();
//$('#kare').fadeIn(5000);
//$('#kare').fadeIn('slow');
});
});
script.js (Açıklamalı)
//--------------------------------------------------
//Sayfa tamamen yüklendiğinde fonksiyon çalışsın.
//--------------------------------------------------
$("document").ready(function() {
//--------------------------------------------------
//yazi id değerine sahip elemente
//tıklandığında fonksiyon çalışsın.
//--------------------------------------------------
$('#yazi').click(function() {
//--------------------------------------------------
//"yazi" id değerine sahip elemente tıklandığında
//"kare" id değerine sahip element fadeIn metodu
//ile ortaya çıksın.
//--------------------------------------------------
$('#kare').fadeIn();
//$('#kare').fadeIn(5000);
//$('#kare').fadeIn('slow');
});
});
style.css
#kare {
width:100px;
height:100px;
background-color:yellow;
border:1px solid #222;
/*--------------------------------------------------
fadeIn metodunun çalıştığını görebilmek için
başta elementin görünmemesini sağladık.
--------------------------------------------------*/
display:none;
}