Merhaba arkadaşlar,
aşağıdaki kod gibi kayan yazı hazırladım fakat kayan yazının uzerıne mause geldıgımde yazı duruyor yazının ustunden cıktıgımda hareket edıyor fakat hızı dusuyor bunu anlayamaıdm yardımcı ola bılırmısınız ?
<!DOCTYPE html>
<html>
<!--
Created using jsbin.com
Source can be edited via http://jsbin.com/efomo/3/edit
-->
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
/* Genel */
*{margin:0;padding:0;border:0;}
#ort {margin:0 auto; width:600px;}
h1,h2 {border-bottom:2px dashed #333;
padding-bottom:3px; margin-bottom:10px;}
/* Pencere ve ?çerik */
.icerik ul {list-style:none;}
.icerik li {background-color:#ccc;
margin:0 5px 5px 5px; padding:5px;}
.pencere {border:2px solid red; margin:0 auto;
width:450px;}
</style>
<style id="jsbin-css">
</style>
</head>
<body>
<div id="or8t">
<!-- Ba?l?k -->
<h1>Kayan div uygulamas?</h1>
<!-- Pencere ve kayan içerik -->
<div class="pencere">
<div class="icerik">
<ul>
<li>1 Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
<li>2 Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttiliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttiliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttiliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttiliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttiliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttiliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
<li>3 Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
<li>4 Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
<li>5 Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
<li>6 Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
</ul>
</div>
</div>
<em>Bilgilendirme : </em>
</div>
<script>
jQuery(document).ready(function($) {
// icerik yuksekligi bulma
var icerikYuksekligi = $('.icerik').outerHeight(true);
//pencere yukseliginie verilen deger
var pencereYuksekligi = 200;
// pencerenin icerigini kesme css'i
$('.pencere').css({
// devam eden içerigin scrool olmamasi komutu
'overflow' : 'hidden',
// pencere yüksekligi tanimi
'height' : pencereYuksekligi + 'px'
});
//icerigi klonlama ve ardilama
$('.icerik').clone().appendTo('.pencere');
//bilgilendirme
$('em').append(icerikYuksekligi+' , '+pencereYuksekligi);
// dongü halindeki animasyon fonksiyonu
function kaydir(){
// animasyon
$('.icerik').eq(0).animate(
// animasyon edilecek edilcek olan deger
{marginTop:'-'+icerikYuksekligi+'px'},
// animasyon süresi
12000,
// animasyon ak??? (düz)
'linear',
// animasyon bitince etkin olacak fonksiyon
function(){
// icerik konumunun basa donmesi komutu
// NOT sebebini anlayamad???m bir sorundan dolay? 0 --> 5 yapt?m
$(this).css('margin-top','5px');
// içerik animasyonu bitince tekrar baslamasi komutu
kaydir();
}
);
};
// olusturulan fonksiyonun tetiklenmesi
kaydir();
// hoverda dur çikinca devam et
$('.pencere').hover(
function(){
$('.icerik').stop();
},
function(){
kaydir();
}
);
});
</script>
</body>
</html>