I am trying to animate a div from left. I was studying from one of the tutorials on the web but for some reason the query is not working. I can’t see why. Is there something wrong with the query?
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head>
<title>jquery practice page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slideleft button').click(function() {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'), 10) == 0 ?
-$lefty.outerWidth() :
0
});
});
});
</script>
<style type="text/css">
.slide {
position: relative;
overflow: hidden;
height: 120px;
width: 350px;
margin: 1em 0;
background-color: #ffc;
border: 1px solid #999;
}
.slide .inner {
position: absolute;
left: 0;
bottom: 0;
width: 338px;
height: 36px;
padding: 6px;
background-color: #4c5;
color: #333;
}
#slidebottom .inner{
display:none;
}
.slide button {
margin: .7em 0 0 .7em;
}
</style>
</head>
<body>
<div id="slidebottom" class="slide">
<button>slide it</button>
<div class="inner">This is supposed to slide in from the left</div>
</div>
</body>
</html>
Above is the entire thing. I cannot seem to be able to find the mistake. Can someone help me?
Some mistakes in your demo:
$(‘#slideleft button’) is not correct. It should be $(‘#slidebottom button’).
Should remove this below css or you would not see anything
Demo here: http://jsfiddle.net/8FLZC/1/