Jquery ile teker teker açılan div?

28-01-2014, 12:16:23

Merhaba,

Bir buton olacak ve bu butona tıklayınca altta 4 adet div açılacak.
Ama Bu açılan divler sırayla ekrana gelecek.

Örneğin : 1. kutu ilk sonra 2.kutu sonra 3.kutu ve en son 4.kutu gelecek.

<ul>
<li>Kutu1</li>
<li>Kutu2</li>
<li>Kutu3</li>
<li>Kutu4</li>
</ul>

bunu nasıl yapabilirim örnek kodlarınız varsa atarmısınız teşekkürler!

28-01-2014, 22:48:27

#2

alikarakoc93

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

Merhaba,

Bir buton olacak ve bu butona tıklayınca altta 4 adet div açılacak.
Ama Bu açılan divler sırayla ekrana gelecek.

Örneğin : 1. kutu ilk sonra 2.kutu sonra 3.kutu ve en son 4.kutu gelecek.

<ul>
<li>Kutu1</li>
<li>Kutu2</li>
<li>Kutu3</li>
<li>Kutu4</li>
</ul>

bunu nasıl yapabilirim örnek kodlarınız varsa atarmısınız teşekkürler!

Sırası ile derken?

Butona basıldığı zaman sırası ile tüm divler mi açılacak ? öyle ise bunların arasında süre olacak mı ?

Yoksa butona her tıklamada mı divler açılacak örn butona 1 kez basıldı 1.div 2 kez basıldı 2.div ?

03-02-2014, 00:43:27

#3

azizarslan

Basit bir şekilde örneğini yaptım. Butona her tıklandığında bir sonraki element'i aktif ediyor. Bir problem olursa özel mesaj gönderebilirsiniz.

http://www.codepen.io/azizarslan/pen/fvpmk

03-02-2014, 01:05:51

#4

dark_way

Yapmak istediğiniz şey yukardaki cevaplardan biri değilse, "azizarslan"ın örneğindeki js kodunu şu şekilde değiştirip deneyin;

var aktif = 0;
function test(){
 $("ul li").eq(aktif).fadeIn(200);
  if( aktif < $("ul li").length ){
    aktif++; setTimeout(test,500)
  }
}
$("button").click(function(){  test(); $(this).fadeOut(100); });

04-02-2014, 13:28:52

#5

CssValley

Misafir

http://codepen.io/idilmiray/full/nuGBc
http://codepen.io/idilmiray/pen/nuGBc

<div class="buton" onclick="goster();">Göster</div>

<ul id="kutular"> 
  <li>Kutu 1</li>
  <li>Kutu 2</li>
  <li>Kutu 3</li>
  <li>Kutu 4</li>
  
</ul>

ul#kutular{
  list-style:none;
  margin-top:10px;
  padding:0;
  
}
ul#kutular li{
  opacity:0;
  display:none;
  width:200px;
  height:80px;
  background:#ccc;
  font:13px arial;
  padding:20px;
  color:#666;
  margin-bottom:3px;
}
.buton{
  background:#444;
  color:#fff;
  font:12px arial;
  display:inline;
  padding:4px 10px;
  border-radius:3px;
 
  
}

function goster(){

var zaman = 0;
$("ul#kutular li").each(function(){
	var nesne = $(this);
  $(nesne).hide();
	$(nesne).css({opacity:0});

	setTimeout(function(){
 
	$(nesne).animate({opacity:1})
	$(nesne).show()
	
	},zaman);
	zaman +=400;
 
});
}