Jquery UI Drop Efekt Sorunu
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam

Anasayfa
İletişim
Üyeler

Jquery UI Drop Efekt Sorunu

Paylaş  :
profil
davmaneydi
GÖRÜNTÜLENME(170)
RAPOR ET
show da animasyon düzgün çalışıyor ama hide da bozuluyor.
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.bar {
width: 650px;
margin: auto;
height: 40px;
background: #efefef;
padding: 20px;
overflow: scroll;
overflow-y: hidden;
}

.area div {
float: left;
margin: 10px;
margin-left: 30px;
background: #94B4EF;
padding: 15px;
width: 75px;
height: 20px;
color: #fff;
text-align: center;
margin-top: -10px
}

.aktif {
background-color: red!important;
}

.tab_icerik {
background: grey;
width: 700px;
margin: auto;
height: 300px;
margin-top: 70px;
}

.area {
width: 1000px
}
/* section {width:1300px; margin: auto; background-color: grey}*/
</style>
<link rel="stylesheet" href="css/jquery-ui.min.css">
</head>

<body>
<section>
<div class="bar">
<div class="area">
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
</div>
</div>

<div class="tab_icerik">
1
</div>
<div class="tab_icerik" style="background-color:blue">
2
</div>
<div class="tab_icerik" style="background-color:yellow">
3
</div>
<div class="tab_icerik" style="background-color:pink">
4
</div>
<div class="tab_icerik" style="background-color:purple">
5
</div>
</section>


<script src="scripts/jquery.min.js"></script>
<script src="scripts/jquery-ui.min.js"></script>
<script>
$(function () {
$(".area div:first").addClass("aktif");
$("div.tab_icerik").hide();
$("div.tab_icerik:first").show();
$(".area div").click(function (e) {
var index = $(this).index();
$(".area div").removeClass("aktif");
$(this).addClass("aktif");
$("div.tab_icerik").hide("drop");
$("div.tab_icerik:eq(" + index + ")").show("drop");
return false
});

});
</script>
</body>

</html>




cArleone
cArleone 78 Gün Önce Cevaplandı
İnceledemi.Anladığım kadarıyla sorun drop efektinden kaynaklanıyor.Efekti uygulamak için tek bir obje seçmek gerekiyor.Birden çok seçince işlemiyor.div.tab_icerik dediğinde tüm tab_iceriklere eriştiğin için buga düşüyor.div.tab_icerik:eq(0) dersen sadece 0 indexsine sahip tab_iceriğe erişir ona uygularsın.Bu şekilde çalıyor.Bir for döngüsü hazırlayarak çözebilirsin.
Bunun yerine
$("div.tab_icerik").hide("drop");
$("div.tab_icerik:eq(" + index + ")").show("drop");

Şunu yaz dene.
for (i=0; i<s; i++) {
$(".tab_icerik:eq("+i+")").hide("drop",{direction: "left"},500);
}
$("section .tab_icerik:eq(" + index + ")").show("drop",{direction: "down"}, 1000)



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol