- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › Rotating a :after image onClick
Hi!
I have a problem I just cant solve, been looking around and just cant find a solution.
What I want to happen is.
When you Click #footer-control the #footer moves up, and at the same time the #footer-control rotates 180 degrees.
Would really appreciate any suggestions.
Cheers
HTML
Text with super Info that everyone wants!!!
CSS
#footer {position:fixed; bottom:0px; left:0px; color:#FFFFFF; display:block; width:100%; height:290px; margin:0px 0px -250px; background: url(images/bg-footer.jpg) no-repeat;}
#footer-control { position:absolute; z-index:120; height: 40px; width: 40px; cursor:pointer;cursor:hand;}
#footer-control:after { content:""; position:absolute; z-index:160; display:block; width:40px; height:40px; background: url(images/footer-arrow.png) no-repeat; }
Jquery
$(document).ready(function(){
$('#footer-control').toggle(
function () {
$('#footer').animate({ marginBottom: '-50px' },{ duration: 500,});
$('#footer-control').animate( { rotate: '180deg' },{ duration: 500,});
},
function () {
$('#footer').animate({ marginBottom: '-250px' }, { duration: 500,});
$('#footer-control').animate( { rotate: '0deg' },{ duration: 500,});
}
);
});
I would recommend just using the toggleClass method, and animating it via CSS.
Thanks it works… would never have taught of that
I’m not to happy with that I had to separate the controls for the image… but it works and that’s what I needed… for now… have to make it sexy later. :)
Again…. Thanks!
You’re welcome :)