Ich bin auf der Suche nach dem Schieberegler zwischen divs mit Animation() -Effekt wechseln. Bisher habe ich versucht, animation() auf addClass() hinzuzufügen, aber es hat nicht funktioniert. Außerdem möchte ich verschiedene Divs im leeren Bereich anzeigen, wenn ich auf ein zufälliges Div aus dem Navigationsmenü klicke.Jquery Tabs und Bar Animation
http://jsbin.com/tapigu/1/edit?html,css,js,output;
$(document).ready(function() {
$(".tab.tab1").click(function(){
$(".active").animate({top: "0px"});
})
$(".tab.tab2").click(function(){
$(".active").animate({top: "78px"});
})
$(".tab.tab3").click(function(){
$(".active").animate({top: "156px"});
})
$(".tab.tab4").click(function(){
$(".active").animate({top: "234px"});
})
$(".tab.tab5").click(function(){
$(".active").animate({top: "312px"});
})
});
#header {
position:absolute;
top:0px;
left:0px;
width:100%;
height:50px;
background:darkorange;
border-bottom: 2px solid black;
}
#chater{
position: absolute;
left: 0px;
top: 52px; /* distanta dintre header si chatbar*/
bottom: 0px;
width: 250px;
height:100%;
opacity: 1;
background-color:lightslategrey;
border-right: 2px solid darkorange;
}
#navtab {
position: absolute;
top:52px; /* distanta dintre header si navtab*/
left:252px;
width: 72px;
height:100%;
background-color: lightslategrey;
bottom:0px;
}
.tab {
height:78px;
width: 78px;
display:flex;
}
.active
{
height:78px;
width: 72px;
background-color: transparent;
border-right:5px solid darkorange;
border-radius:2px;
position: absolute;
}
#slidebar
{ position:absolute;
left:0;
top:364px;
height:78px;
width: 5px;
background:darkorange;
border-radius: 2px;
}
#slidediv {
position:absolute;
left:324px;
top:52px;
height:100%;
width: 5px;
background: lightslategrey;
}<html>
<head>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<meta charset="UTF-8">
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<div id="header"></div>
<div id="chater"></div>
<div id='slidediv'>
<div style='display:none' id="slidebar"></div>
</div>
<div id="navtab">
<div class="active"></div>
<div class="tab tab1">sal</div>
<div class="tab tab2">sal</div>
<div class="tab tab3">sal</div>
<div class="tab tab4">sal</div>
<div class="tab tab5">sal</div>
</div>
</body>
</script>
</html>
Es Schiebe nicht nach oben oder unten? Kennst du irgendeine CSS-Eigenschaft dafür? –
@Alexandru Ist das, was Sie brauchen? http://jsbin.com/xizunicaho/edit?html,css,js,output – Tonza
Ich war auf der Suche nach einem Hoch/Runter-Effekt. –