Yazıların tek tek opacity değerini düşürme ?

09-10-2013, 18:16:44

Merhaba Arkadaşlar,
Alt alta birkaç yazım var. Bu yazıları javascript yardımı ile 3'er saniye gösterip gizletmek istiyorum.
Yazdığım javascript kodu :

<script type="text/javascript">
$(document).ready(function() {
     $('#heading1').css({opacity: 0}).animate({opacity: 1.0,left: "50px"}, 1000);    
     $('#heading1').css({opacity: 0}).delay(5000).animate({opacity: 0,left: "-50px"}, 1000);

     $('#heading2').css({opacity: 0}).delay(7000).animate({opacity: 1.0,left: "50px"}, 1000);
     $('#heading2').css({opacity: 0}).delay(5000).animate({opacity: 0,left: "-50px"}, 1000);

     $('#heading3').css({opacity: 0}).delay(14000).animate({opacity: 1.0,left: "50px"}, 1000);
     $('#heading3').css({opacity: 0}).delay(5000).animate({opacity: 0,left: "-50px"}, 1000);

     $('#heading4').css({opacity: 0}).delay(21000).animate({opacity: 1.0,left: "50px"}, 1000);
    $('#headings4').css({opacity: 0}).delay(5000).animate({opacity: 0,left: "-50px"}, 1000);

})
</script>

Benim içeriğim ise şu şeklde :

		echo '<div id="twitter"><div style="display: block;">'.$text.'  <span>'.$created_at.'</span></div></div>';

O javascript kodunu buraya nasıl uyarlayabiliriz.

10-10-2013, 00:45:27

#2

BestCoder

aTKn94 adlı üyeden alıntı: mesajı görüntüle

Merhaba Arkadaşlar,
Alt alta birkaç yazım var. Bu yazıları javascript yardımı ile 3'er saniye gösterip gizletmek istiyorum.
Yazdığım javascript kodu :

<script type="text/javascript">
$(document).ready(function() {
     $('#heading1').css({opacity: 0}).animate({opacity: 1.0,left: "50px"}, 1000);    
     $('#heading1').css({opacity: 0}).delay(5000).animate({opacity: 0,left: "-50px"}, 1000);

     $('#heading2').css({opacity: 0}).delay(7000).animate({opacity: 1.0,left: "50px"}, 1000);
     $('#heading2').css({opacity: 0}).delay(5000).animate({opacity: 0,left: "-50px"}, 1000);

     $('#heading3').css({opacity: 0}).delay(14000).animate({opacity: 1.0,left: "50px"}, 1000);
     $('#heading3').css({opacity: 0}).delay(5000).animate({opacity: 0,left: "-50px"}, 1000);

     $('#heading4').css({opacity: 0}).delay(21000).animate({opacity: 1.0,left: "50px"}, 1000);
    $('#headings4').css({opacity: 0}).delay(5000).animate({opacity: 0,left: "-50px"}, 1000);

})
</script>

Benim içeriğim ise şu şeklde :

		echo '<div id="twitter"><div style="display: block;">'.$text.'  <span>'.$created_at.'</span></div></div>';

O javascript kodunu buraya nasıl uyarlayabiliriz.

Aşağıdaki kodu sitenin herhangi bir yerine ekleyerek denermisin..

<script type="text/javascript">
$(document).ready(function() {
     $('#twitter').css({opacity: 0}).animate({opacity: 1.0,left: "50px"}, 1000);    
     $('#twitter').css({opacity: 0}).delay(3000).animate({opacity: 0,left: "-50px"}, 1000);
})
</script>

10-10-2013, 02:01:11

#3

aTKn94

BestCoder adlı üyeden alıntı: mesajı görüntüle

Aşağıdaki kodu sitenin herhangi bir yerine ekleyerek denermisin..

<script type="text/javascript">
$(document).ready(function() {
     $('#twitter').css({opacity: 0}).animate({opacity: 1.0,left: "50px"}, 1000);    
     $('#twitter').css({opacity: 0}).delay(3000).animate({opacity: 0,left: "-50px"}, 1000);
})
</script>

Tamamdır hallettim