Need help in animating a div up on click and down via the same click link. Here is my Javascript below:
$(function() {
// global functions
var dash = $('#Dashboard');
var dashBtn = $('#dashClick');
var state = dash.css({
"top":600
});
var clicked = dashBtn.click(function(e) {
e.preventDefault();
if(clicked) {
dash.animate({"top":0});
}
if(state > 0 && clicked) {
dash.animate({"top":600});
}
});
//make it height of document
dash.height($(document).height());
});
and my HtML below showing the references to the javascript with the ID's:
<a id="dashClick" href="#">Dashboard</a>
<div id="Dashboard">
<h2 class="dashTitle">Project Information</h2>
<div class="dashInnerAdd">
<p>
Project name: CSS3 Effects N' Stuff
My github is: https://github.com/Amechi101/css3effects
</p>
</div>
</div>
</main> <!-- end grid main-->
</div>
<!--end wrap -->
Among other things (see the code for all changes):
If you want to use top
, you probably are wanting it to behave like it does with absolute positioning. To do that, you need a container with relative positioning around the #Dashboard
. Also, your javascript animate needs px values. "top":600
should really be top:"600px"
.
html:
<a id="dashClick" href="#">Dashboard</a>
<div class="container">
<div id="Dashboard">
<h2 class="dashTitle">Project Information</h2>
<div class="dashInnerAdd">
<p>
Project name: CSS3 Effects N' Stuff
My github is: https://github.com/Amechi101/css3effects
</p>
</div>
</div>
</div>
js:
$(function() {
// global functions
var dash = $('#Dashboard');
var dashBtn = $('#dashClick');
var clicked = false;
dashBtn.click(function(e) {
e.preventDefault();
if(clicked === true) {
clicked = false;
dash.animate({top:"0px"});
} else {
clicked = true;
dash.animate({top:"600px"});
}
});
//make it height of document
dash.height($(document).height());
});
and some css:
.container {
position: relative;
}
#Dashboard {
position: absolute;
top: 0;
}
fiddle: http://jsfiddle.net/SQK78/2/
If you don't need the absolute positioning, you can just change top
to marginTop
, and you can get rid of the container
wrapper as well as all of the css in that fiddle.
Your main javascript only executes once. You need to track state from within the click handler. Try this:
$(function() {
// global functions
var dash = $('#Dashboard');
var dashBtn = $('#dashClick');
var state = true;
dashBtn.click(function(e) {
state = !state;
e.preventDefault();
if(state) {
dash.animate({"top":20});
}
if(!state) {
dash.animate({"top":600});
}
});
//make it height of document
dash.height($(document).height());
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.