everyone who can help me change to auto slide 100px the div when mouse hover the link?
My code:
<!DOCTYPE html>
<html>
<head>
<style>
.left, .hidden {
float: left;
height:350px;
}
.left {
width: 50%;
background: #fff;
z-index:1;
}
.hidden {
width:7%;
z-index:2;
position:absolute;
left:-1000px;
background:grey;
color:#000;
}
.clear {
clear:both;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="hidden">Show Me</div>
<div class="left">Left panel</div>
<div class="clear"></div>
<a href="#" id="slide">Show/hide Slide Panel</a>
<script>
$(document).ready(function(){
$('#slide').click(function(){
var hidden = $('.hidden');
if (hidden.hasClass('visible')){
hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
} else {
hidden.animate({"left":"0px"}, "slow").addClass('visible');
}
});
});
</script>
</body>
</html>
Thank you.
Sachin
41.1k7 gold badges94 silver badges107 bronze badges
2 Answers 2
use .hover instead .click
try this
<script>
$(document).ready(function(){
$('#slide').hover(function(){
var hidden = $('.hidden');
if (hidden.hasClass('visible')){
hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
} else {
hidden.animate({"left":"0px"}, "slow").addClass('visible');
}
});
});
</script>
answered Jun 12, 2014 at 10:14
Mr7-itsurdeveloper
1,6412 gold badges17 silver badges24 bronze badges
Sign up to request clarification or add additional context in comments.
Comments
Simply change
$('#slide').click(function(){
to
$('#slide').hover(function(){
Comments
default