Grow your CSS skills. Land your dream job.

Animate div onclick other div

  • # June 13, 2013 at 10:16 am

    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

    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?

    # June 13, 2013 at 10:25 am

    Yes that is exactly it heh.

    # June 13, 2013 at 10:30 am

    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?

    # June 13, 2013 at 7:13 pm

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

    Hope this helps you out.

    # June 13, 2013 at 8:58 pm

    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

    # June 14, 2013 at 10:14 am

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

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".