jQuery fadeTo – aycan.net

fadeTo görselliğe önem veren webtasarımcılar için artık vazgeçilemeyecek bir elementdir.
fadeTo ne işi yapar ?
Hepimizinde css’deki vazgeçemeyeceğimiz opacity elementinin jQuery kütüphanesinde yazılmış ve animasyonlu halidir. Tüm tarayıcılarda sorunsuz bir şekilde çalışır ve ziyaretçilerimiz efekti anlayamazlar ama çok hoşlarına gidecektir. fadeTo elementini kullanmak çok basit sadece hangi bölgedeki resimlere efekt verebileceğimizi jQuery dosyamızda belirteceğiz bu arada herkez jquery.js dosyasını index.html’sine entegre edeceğini biliyordur.

Öncelikle html dosyamızı yazıyoruz.

<h1 class="MahsetHaber">Mahşet Haberler</h1>
<div class="MahsetHaberIcerik">
<ul>
<li>
<img id="1" src="http://static.jquery.com/books/jquery-for-designers_thumb.jpg"
onmouseover="ResimGoster('1');" onmouseout="ResimKapat('1');"/>
</li>
<li>
<img id="2" src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg"
onmouseover="ResimGoster('2');" onmouseout="ResimKapat('2');"/>
</li>
<li>
<img id="3"src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg"
onmouseover="ResimGoster('3');" onmouseout="ResimKapat('3');"/>
</li>
<li>
<img id="4" src="http://static.jquery.com/books/learning-jquery-1.3_thumb.jpg"
onmouseover="ResimGoster('4');" onmouseout="ResimKapat('4');"/>
</li>
</ul>
</div>

<h1 class="MahsetHaber">Mahşet Haberler</h1>

<ul>

<li>

<img id="1" src="http://static.jquery.com/books/jquery-for-designers_thumb.jpg"

onmouseover="ResimGoster('1');" onmouseout="ResimKapat('1');"/>

</li>

<li>

<img id="2" src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg"

onmouseover="ResimGoster('2');" onmouseout="ResimKapat('2');"/>

</li>

<li>

<img id="3"src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg"

onmouseover="ResimGoster('3');" onmouseout="ResimKapat('3');"/>

</li>

<li>

<img id="4" src="http://static.jquery.com/books/learning-jquery-1.3_thumb.jpg"

onmouseover="ResimGoster('4');" onmouseout="ResimKapat('4');"/>

</li>

</ul>

</div>

Html kısmında h1 yani başlığımızı koyduk sonra bir .MahsetHaberIcerik diye bir div oluşturduk ve içine listemizi koyduk.

Şimdi Css dosyamızı yazalım.

.MahsetHaber{ background-color:#353D45; width:433px; color:#e2e2e2; font: 16px 'Trebuchet MS'; }
.MahsetHaberIcerik{width:500px; overflow:hidden; }
.MahsetHaberIcerik ul{ list-style: none; }
.MahsetHaberIcerik ul li { float:left; width:205px; height: 100px; margin:10px 5px 0px 10px; }

.MahsetHaber{ background-color:#353D45; width:433px; color:#e2e2e2; font: 16px 'Trebuchet MS'; }

.MahsetHaberIcerik{width:500px; overflow:hidden; }

.MahsetHaberIcerik ul{ list-style: none; }

.MahsetHaberIcerik ul li { float:left; width:205px; height: 100px; margin:10px 5px 0px 10px; }

Css kısmında MahsetHaber ile h1 tagımızın özelliğini belirledik .MansetHaberIcerik kısmında div’imizin boylarını belirledik sonra ul ve li’leri tanımladık.
Şimdi jQuery komutlarımızı yazalım

$(document).ready(function ()
{ $('.MahsetHaberIcerik ul li img').fadeTo('fast',0.50);
})

function ResimGoster (ResimId)
{
$('#' + ResimId).stop().fadeTo("fast", 1);
}
function ResimKapat (ResimId)
{
$('#' + ResimId).stop().fadeTo("fast", 0.50);
}

$(document).ready(function ()

{ $('.MahsetHaberIcerik ul li img').fadeTo('fast',0.50);

})

function ResimGoster (ResimId)

{

$('#' + ResimId).stop().fadeTo("fast", 1);

}

function ResimKapat (ResimId)

{

$('#' + ResimId).stop().fadeTo("fast", 0.50);

}

Js kısmında (en önemli kısım) burada

$(document).ready(function () ) { ...}

1	$(document).ready(function () ) { ...}

Sayfa yüklendiğiden şunları yap

$('.MahsetHaberIcerik ul li img').fadeTo('fast',0.50);

1	$('.MahsetHaberIcerik ul li img').fadeTo('fast',0.50);

.MahsetHaberIcerik divinin içindeki ul’un içindeki li’nin içindeki img yani resimleri bul ve opacity değerini 0.50 yap.

function ResimGoster (ResimId) { $('#' + ResimId).stop().fadeTo("fast", 1); }

1	function ResimGoster (ResimId) { $('#' + ResimId).stop().fadeTo("fast", 1); }

Resimlerin üstüne geldiğinde üstüne gelen resimin id’sini al ve opacity değerini 1 yap.

function ResimKapat (ResimId) { $('#' + ResimId).stop().fadeTo("fast",0.50); }

1	function ResimKapat (ResimId) { $('#' + ResimId).stop().fadeTo("fast",0.50); }

Resimlerin üstüne geldiğinde üstüne gelen resimin id’sini al ve opacity değerini 0.50 yap.

Js dosyamızında nasıl çalıştığını anlattım.

Komple Html dosyamız.

<!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"/>
<meta name="description" content="Aycan.Net fadeTo"/>
<meta name="keywords" content="Aycan.Net fadeTo"/>
<meta name="ROBOTS" content="FOLLOW, INDEX"/>
<title>Aycan.Net fadeTo</title>

<script type="text/javascript" src="jquery.js"></script>

<script>
$(document).ready(function ()
{ $('.MahsetHaberIcerik ul li img').fadeTo('fast',0.50);
})

function ResimGoster (ResimId)
{
$('#' + ResimId).stop().fadeTo("fast", 1);
}
function ResimKapat (ResimId)
{
$('#' + ResimId).stop().fadeTo("fast", 0.50);
}
</script>
<style>
.MahsetHaber{ background-color:#353D45; width:433px; color:#e2e2e2; font: 16px 'Trebuchet MS'; }
.MahsetHaberIcerik{width:500px; overflow:hidden; }
.MahsetHaberIcerik ul{ list-style: none; }
.MahsetHaberIcerik ul li { float:left; width:205px; height: 100px; margin:10px 5px 0px 10px; }
</style>
</head>
<body>
<h1 class="MahsetHaber">Mahşet Haberler</h1>
<div class="MahsetHaberIcerik">
<ul>
<li>
<img id="1" src="http://static.jquery.com/books/jquery-for-designers_thumb.jpg"
onmouseover="ResimGoster('1');" onmouseout="ResimKapat('1');"/>
</li>
<li>
<img id="2" src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg"
onmouseover="ResimGoster('2');" onmouseout="ResimKapat('2');"/>
</li>
<li>
<img id="3"src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg"
onmouseover="ResimGoster('3');" onmouseout="ResimKapat('3');"/>
</li>
<li>
<img id="4" src="http://static.jquery.com/books/learning-jquery-1.3_thumb.jpg"
onmouseover="ResimGoster('4');" onmouseout="ResimKapat('4');"/>
</li>
</ul>
</div>
</body>
</html>

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

<head>

<title>Aycan.Net fadeTo</title>

$(document).ready(function ()

{ $('.MahsetHaberIcerik ul li img').fadeTo('fast',0.50);

})

function ResimGoster (ResimId)

{

$('#' + ResimId).stop().fadeTo("fast", 1);

}

function ResimKapat (ResimId)

{

$('#' + ResimId).stop().fadeTo("fast", 0.50);

}

</script>

<style>

.MahsetHaber{ background-color:#353D45; width:433px; color:#e2e2e2; font: 16px 'Trebuchet MS'; }

.MahsetHaberIcerik{width:500px; overflow:hidden; }

.MahsetHaberIcerik ul{ list-style: none; }

.MahsetHaberIcerik ul li { float:left; width:205px; height: 100px; margin:10px 5px 0px 10px; }

</style>

</head>

<body>

<h1 class="MahsetHaber">Mahşet Haberler</h1>

<ul>

<li>

<img id="1" src="http://static.jquery.com/books/jquery-for-designers_thumb.jpg"

onmouseover="ResimGoster('1');" onmouseout="ResimKapat('1');"/>

</li>

<li>

<img id="2" src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg"

onmouseover="ResimGoster('2');" onmouseout="ResimKapat('2');"/>

</li>

<li>

<img id="3"src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg"

onmouseover="ResimGoster('3');" onmouseout="ResimKapat('3');"/>

</li>

<li>

<img id="4" src="http://static.jquery.com/books/learning-jquery-1.3_thumb.jpg"

onmouseover="ResimGoster('4');" onmouseout="ResimKapat('4');"/>

</li>

</ul>

</div>

</body>

</html>

jQuery fadeTo