- This topic is empty.
-
AuthorPosts
-
June 13, 2013 at 10:16 am #45505BigBadWolfParticipant
I have been trying to find a solution for this problem for some time. I have a div with an animation (basically an alien ship moving around screen). I want to be able to animate this div when clicking another div which will then open a new page. I tried using targets but I am not very familiar with them and its not working at all.
Would really appreciate any help thanks :)
June 13, 2013 at 10:23 am #138591Paulie_DMemberHmm…I’m not entirely sure what it is you are trying to do.
You have div [not the animated one] which is clickable.
When that div is clicked you want a second div to animate **and** you want to load another page (presumably after a delay).
Is that right?
June 13, 2013 at 10:25 am #138592BigBadWolfParticipantYes that is exactly it heh.
June 13, 2013 at 10:30 am #138593Paulie_DMemberJS will be involved (jQuery would be the simplest) whereby you delay the default action (opening the new page) for the length of the animation **and** animate the ‘ship’ div (either by js or an actual keyframe animation).
Unfortunately, that’s beyond my capabilities but I’m sure someone could help.
Perhaps you could get us started in Codepen?
June 13, 2013 at 7:13 pm #138657amyth91Participant$(document).ready(function(){
//click the clickable div
$(“#clickableDiv”).click(function(){
//add animation/keyframes class to the alienship/animated div
$(“#animatedDiv”).addClass(“animation”);
});
//oepn new page after 3s
setTimeout(function(){ window.open(‘www.yourdomain.com’,’_blank’);},3000)
})June 13, 2013 at 7:13 pm #138658amyth91ParticipantHope this helps you out.
June 13, 2013 at 8:58 pm #138663AnonymousInactiveIf i understand what you mean this should help.
$(“#div being clicked”).click(function() {
$(“#div being animated”).animate({“left”:”200px”});
});Add the ID of the div that is being clicked to start the animation where it says “#div being clicked”. and for the div that is being animated on the second selector. and the change the properties after the .animate between the parenthesis, it works similar to css
June 14, 2013 at 10:14 am #138707BigBadWolfParticipantThanks a lot to everyone managed to make it work with your suggestions. Once I saw your posts I realized that I had done something similar before. Thanks a lot :)
-
AuthorPosts
- The forum ‘Other’ is closed to new topics and replies.