Animate div onclick other div

[BigBadWolf]

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 :)

[Paulie_D]

Hmm…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?

[BigBadWolf]

Yes that is exactly it heh.

[Paulie_D]

JS 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?

[amyth91]

$(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)
})

[amyth91]

Hope this helps you out.

[Anonymous]

If 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

[BigBadWolf]

Thanks 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 :)

[Author]

Posts