Just starting out with jQuery and I have a class for absolute centering (it's working as intended):
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#logo {
background: url(logo.png) no-repeat center;
background-size: 100%;
height: 25%;
width: 10%;
z-index: 999;
}
Applied to a Span:
<a href="#" id="intro">
<span alt="" class="Absolute-Center" id="logo"></span>
</a>
Now, when I try to animate it:
$(document).ready(function() {
$("#intro").click(function() {
$(".Absolute-Center").animate({
bottom: "+=80%"
}, 3000 );
});
});
The issue is that the duration of 3000 is not being respected, the span is moving instantly. What am I missing here? I suspect it has something to do with the span being inside the a tag and having multiple classes and ids, but I'm unsure.
Even using bottom: "80%" doesn't work.
Update: It appears to work in Chrome and IE 11, but not in Firefox 28.
Update: Check out the issue in this jsfiddle. If you remove the top:0;, the animation works correctly.
Any thoughts on this?
Appreciate it! :)