Noch nicht viel geschrieben
Hallo!
Ich habe Balken die bei "mouseover" ausfahren und bei "mouseout" wieder einfahren sollen.
Dies klappt soweit gut, jedoch fährt der Balken bei "mouseout" nicht gleich wieder zurück sondern erst wenn die "mouseover" - Funktion beendet ist.
Dies führt bei mehrmaligen hinüber fahren mit der Maus innerhalb kurzer Zeit zu mehreren Wiederholungen.
Hier der Code:
Hat jemand eine Idee wie man dies Lösen könnte?
Vielen Dank für eure Hilfe.
Gruss
Damian
Ich habe Balken die bei "mouseover" ausfahren und bei "mouseout" wieder einfahren sollen.
Dies klappt soweit gut, jedoch fährt der Balken bei "mouseout" nicht gleich wieder zurück sondern erst wenn die "mouseover" - Funktion beendet ist.
Dies führt bei mehrmaligen hinüber fahren mit der Maus innerhalb kurzer Zeit zu mehreren Wiederholungen.
Hier der Code:
HTML:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: px;
}
html {
background: #FFF;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
color:#666;
}
#main {
margin: 10px auto;
width: 1000px;
}
.navbox {
height: 20px;
width: 40px;
margin: 0 0 10px 0;
cursor: pointer;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#pink {
background: #de0079;
}
#orange {
background: #ea7818;
}
#yellow {
background: #f3bc00;
}
#green {
background: #79b41e;
}
.varcheck {
color: #73a6ff;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".navbox").mouseover(function() {
$(this).animate({
width: "1000px"
},{duration: 500});
});
$(".navbox").mouseout(function() {
$(this).animate({
width: "40px"
},{duration: 150});
});
});
</script>
</head>
<body>
<div id="main">
<div class="navbox" id="pink">
</div>
<div class="navbox" id="orange">
</div>
<div class="navbox" id="yellow">
</div>
<div class="navbox" id="green">
</div>
</div>
</body>
</html>
Hat jemand eine Idee wie man dies Lösen könnte?
Vielen Dank für eure Hilfe.
Gruss
Damian