The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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

    //click the clickable div
    //add animation/keyframes class to the alienship/animated div
    //oepn new page after 3s

    # 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed