Title: Animate different objects with link click
Last modified: August 28, 2019

---

# Animate different objects with link click

 *  Resolved [jcsusano](https://wordpress.org/support/users/jcsusano/)
 * (@jcsusano)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/animate-different-objects-with-link-click/)
 * Hello [@eleopard](https://wordpress.org/support/users/eleopard/),
    First, thank
   you very much for such an awesome plugin!!!
 * Second, I’m using your plugin together with [https://wordpress.org/plugins/devvn-image-hotspot/](https://wordpress.org/plugins/devvn-image-hotspot/)
   so I can animate different image hotspots over a background image.
    I’m also 
   using the code you provided in this post: [https://wordpress.org/support/topic/have-a-shortcode-animate-from-a-link-click/](https://wordpress.org/support/topic/have-a-shortcode-animate-from-a-link-click/)
 * What I need is to “extend” your code in order to have different classes assigned
   to different objects (in this case image hotspots) so when I click on different
   links, eg.: Bus Stops, Supermarkets, Banks, ATM’s, Schools, Parks, etc. they 
   will trigger an animation for each image.
 * Right now it is working by, as per your code, applying the css classes:
    1. On
   Links: eds-animate-btn 2. On Image Hotspots: eds-animate-form
 * But what I want is to have:
    1. On Links: eds-animate-btn-bus-stops eds-animate-
   btn-supermarkets eds-animate-btn-banks eds-animate-btn-atms eds-animate-btn-schools
   eds-animate-btn-parks
 * 2. On image hotspots:
    eds-animate-icon-bus-stops eds-animate-icon-supermarkets
   eds-animate-icon-banks eds-animate-icon-atms eds-animate-icon-schools eds-animate-
   icon-parks
 * I hope my explanation makes sense. I look forward to your reply.
    JC
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fanimate-different-objects-with-link-click%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [eleopard](https://wordpress.org/support/users/eleopard/)
 * (@eleopard)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/animate-different-objects-with-link-click/#post-11878177)
 * Dear jcsusano,
 * Thanks for using the Animate It!
 * Please update the script added to footer with the following:
 *     ```
       <script>
          (function($){
              var animationClasses = 'animated bounce duration2';
              $(document).ready(function() {
                  var animationPairs = [
       		   {
                      'btnSelector': '.eds-animate-btn-bus-stops',
                      'elementSelector': '.eds-animate-icon-bus-stops'
                  },
       		   {
                      'btnSelector': '.eds-animate-btn-supermarkets',
                      'elementSelector': '.eds-animate-icon-supermarkets'
                  },
       		   {
                      'btnSelector': '.eds-animate-btn-banks',
                      'elementSelector': '.eds-animate-icon-banks'
                  },
       		   {
                      'btnSelector': '.eds-animate-btn-atms',
                      'elementSelector': '.eds-animate-icon-atms'
                  },
       		   {
                      'btnSelector': '.eds-animate-btn-schools',
                      'elementSelector': '.eds-animate-icon-schools'
                  },
       		   {
                      'btnSelector': '.eds-animate-btn-parks',
                      'elementSelector': '.eds-animate-icon-parks'
                  }
       		   ];
                  animationPairs.forEach(function(pair) {
                      $("body").on("click", pair.btnSelector, function (e) {
                          e.preventDefault();
                          var $elem = $(pair.elementSelector);
                          if ($elem.length) {
                              if ($elem.hasClass("animated")) {
                                  $elem.removeClass(animationClasses);
                              }
                              $elem.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function (e) {
                                  $elem.removeClass(animationClasses);
                              });
                              $elem.addClass(animationClasses);
                          }
                      });
                  });
              });
          })(jQuery);
       </script>
       ```
   
 * This should accomplish what you are looking for.
    I have tested this out on my
   Dev website here: [https://wp5.wpdevcloud.com/post-for-jcsusano/](https://wp5.wpdevcloud.com/post-for-jcsusano/)
 * Please let me know if this works for you.
 *  Thread Starter [jcsusano](https://wordpress.org/support/users/jcsusano/)
 * (@jcsusano)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/animate-different-objects-with-link-click/#post-11880419)
 * Thank you very much [@eleopard](https://wordpress.org/support/users/eleopard/)!!!
   
   It works perfect!!
 *  Plugin Author [eleopard](https://wordpress.org/support/users/eleopard/)
 * (@eleopard)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/animate-different-objects-with-link-click/#post-11881947)
 * Glad to know it worked. Please feel free to let me know if you face any other
   issues.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Animate different objects with link click’ is closed to new replies.

 * ![](https://ps.w.org/animate-it/assets/icon-256x256.png?rev=989356)
 * [Animate It!](https://wordpress.org/plugins/animate-it/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/animate-it/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/animate-it/)
 * [Active Topics](https://wordpress.org/support/plugin/animate-it/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/animate-it/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/animate-it/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [eleopard](https://wordpress.org/support/users/eleopard/)
 * Last activity: [6 years, 8 months ago](https://wordpress.org/support/topic/animate-different-objects-with-link-click/#post-11881947)
 * Status: resolved