Hallo allemaal,
ik ben nieuw op dit forum en ben bezig met javascript te leren. Ik wil een balk maken die uit de bovenkant van de pagina naarbeneden slide met uitleg over item X, wanneer je je muis boven item x houdt. Ik heb de code, maar eigenlijk wil ik wanneer je met je muis over een item gaat dat er eerst gekeken wordt welke uitleg zichtbaar gemaakt moet worden, en dat vervolgens een functie de slide laat zien. Hoe moet dat? Dit is wat ik heb:
ik ben nieuw op dit forum en ben bezig met javascript te leren. Ik wil een balk maken die uit de bovenkant van de pagina naarbeneden slide met uitleg over item X, wanneer je je muis boven item x houdt. Ik heb de code, maar eigenlijk wil ik wanneer je met je muis over een item gaat dat er eerst gekeken wordt welke uitleg zichtbaar gemaakt moet worden, en dat vervolgens een functie de slide laat zien. Hoe moet dat? Dit is wat ik heb:
Code:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//opent de slider voor 1, sluit 2sec na mouseOut.
$(".open1").hover(function(){//syntax: hover(functiemouseover{},functiemouseout{});
$(".one").show();
$(".two").hide();
$(".slider").animate({//syntax: animate({optie: "waarde"}, duurInMilisec);
marginTop: "0px"
}, 500 );
},
function(){
setTimeout(function(){$(".slider").animate({
marginTop: "-30px"
}, 500 );
}, 2000);
});
//slider voor 2
$(".open2").hover(function(){
$(".two").show();
$(".one").hide();
$(".slider").animate({
marginTop: "0px"
}, 500 );
},
function(){
setTimeout(function(){$(".slider").animate({
marginTop: "-30px"
}, 500 );
}, 2000);
});
});
</script>
<style type="text/css">
.slider {
position: absolute;
left: 0px;
top: 0px;
margin-top: -500px;
background-color: gray;
height: 30px;
width: 100%;
border-bottom: 1px solid black;
}
#state {
position: absolute;
left: 500px;
top: 600px;
}
.one {
display: none;
}
.two {
display: none;
}
</style>
</head>
<body>
<div class="slider">
<span class="one">Hier komt info die depending op de gehoverde class uitleg geeft over het gehoverde item. (duidelijke taal!)</span>
<span class="two">Info geselecteerd op basis van class</span>
</div>
<div id="state"><a href="#" class="open1">1e text</a> || <a href="#" class="open2">2e text</a></div>
</body>
</html>
