Experimenting with animating an element through onClick event using JavaScript

I would like to create an animated div using JavaScript that activates on click. 

    <div class="Designs">

        <p>Designs</p>

            <div class="Thumbnails" data-animation="animated pulse">

                <a href="images/Halloween/bat.png"><img src="images/Halloween/bat_sm.png" width="140" height="82"/></a>

            </div>


    </div> <!-- End Designs -->

To see an example, please visit my website

$('.Thumbnails a').on('click', function(e){
    var parent = $(this).parent();
    var animationName = parent.data('animation') || 'animated pulse';

    parent.addClass(animationName).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
        parent.removeClass(animationName);
    });
javascriptjqueryhtmlcssajax

Answer №1

It turns out that the document ready function was missing in your code. You can check out the working demo below to see the fix in action. Additionally, consider adding data-animation to the div with the class .Thumbnail for easy modification of animations using HTML markup. Explore different animation options for "Designs".

To see the code at jsFiddle, click here.

$(function () {
    var animationend = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

    $('.Thumbnails').on('click', function () {
        var $this = $(this);
        var animationName = $this.data('animation') || 'animated bounce' ;
        
        $this.addClass(animationName).one(animationend, function () {;
            $this.removeClass(animationName);
        });
    });
});
@charset"UTF-8";
 #container {
    max-width: 960px;
    margin-right: auto;
    margin-left: auto;
}
body {
    /*background-image: url(images/bg.png);*/
    background-repeat: repeat-x;
}
name, h3 {
    color: black;
    padding-left: 5px;
    margin: 0;
}
name {
    font-size: 51px;
}
h3 {
    margin-bottom: 2em;
}
h2 {
    margin-top: 30px;
    margin-bottom: 5px;
}
p {
    font-size: 16px;
    margin: 0 0 0 0;
    max-width: 960px;
}
#float {
    float: left;
    padding-left: 10px;
}
img {
    min-width: 246px;
    float: left;
    margin-right: 2em;
    margin-top: 6px;
    margin-left: 1em;
}
/*-----------------------*/

/* Navigation */
 .nav {
    height:auto;
    margin: 0 .3em 0 0;
    display:inline;
    display:inline-block;
}
/* specifying the nav list horizontal */
 .nav li {
    display: inline;
    font-size:16px;
    padding: 0 0 0 15.8em;
}
.nav a {
    text-decoration: none;
    display: inline-block;
}
/* ---------------------------- */

/* Designs_Drawings Div ------ */
 #content .Designs_Drawings {
    width: 680px;
    height: 160px;
    margin: 8em auto 3em auto;
}
#content .Designs {
    background-color: #CCC;
    border-style: solid;
    border-width: 2px;
    width: 230px;
    height: 150px;
    border-radius: 1em;
    -ms-transform: rotate(-10deg);
    /* IE 9 */
    -webkit-transform: rotate(-10deg);
    /* Chrome, Safari, Opera */
    transform: rotate(-10deg);
    float: left;
    display: inline-block;
}
#content .Designs p {
    text-align: right;
    /* Top,Right,Down,Left */
    margin: .5em 1em 0 0;
}
#content .Designs .Thumbnails {
    width: 143px;
    height: 95px;
    background-color: blue;
    /* Give thumb div Border/position */
    border-style: solid;
    border-width: 1px;
    /*---------------------*/
    /* Top,Right,Down,Left */
    margin: .5em 0 0 1em;
    /* Curves div Corners */
    border-radius: 1em;
}
/* Drawings Div ------ */
 #content .Drawings {
    background-color: #CCC;
    border-style: solid;
    border-width: 2px;
    width: 230px;
    height: 150px;
    border-radius: 1em;
    -ms-transform: rotate(-350deg);
    /* IE 9 */
    -webkit-transform: rotate(-350deg);
    /* Chrome, Safari, Opera */
    transform: rotate(-350deg);
    float: right;
    display: inline-block;
}
#content .Drawings p {
    text-align: right;
    /* Top,Right,Down,Left */
    margin: .5em 1em 0 0;
}
#content .Drawings .Thumbnails {
    width: 143px;
    height: 95px;
    /* Give div Border */
    border-style: solid;
    border-width: 1px;
    margin: .5em 0 0 1em;
    /* Curves div Corners */
    border-radius: 1em;
}
/* End Designs_Drawings Div */

/* -------------------------*/

/* Photography_WebSites Div */
 #content .Photography_WebSites {
    width: 680px;
    height: 160px;
    margin: 0 auto 4em auto;
}
/* Photography Div ----- */
 #content .Photography {
    background-color: #CCC;
    border-style: solid;
    border-width: 2px;
    width: 230px;
    height: 150px;
    border-radius: 1em;
    -ms-transform: rotate(350deg);
    /* IE 9 */
    -webkit-transform: rotate(350deg);
    /* Chrome, Safari, Opera */
    transform: rotate(350deg);
    float: right;
    display: inline-block;
}
#content .Photography p {
    text-align: right;
    /* Top,Right,Down,Left */
    margin: .5em 1em 0 0;
}
#content .Photography .Thumbnails {
    width: 143px;
    height: 95px;
    /* Give thumb div Border/position */
    border-style: solid;
    border-width: 1px;
    /*---------------------*/
    /* Top,Right,Down,Left */
    margin: .5em 0 0 1em;
    /* Curves div Corners */
    border-radius: 1em;
}
/* Web Sites Div ------ */
 #content .WebSites {
    background-color: #CCC;
    border-style: solid;
    border-width: 2px;
    width: 230px;
    height: 150px;
    border-radius: 1em;
    -ms-transform: rotate(10deg);
    /* IE 9 */
    -webkit-transform: rotate(10deg);
    /* Chrome, Safari, Opera */
    transform: rotate(10deg);
    float: left;
    display: inline-block;
}
#content .WebSites p {
    text-align: right;
    /* Top,Right,Down,Left */
    margin: .5em 1em 0 0;
}
#content .WebSites .Thumbnails {
    width: 143px;
    height: 95px;
    /* Give div Border */
    border-style: solid;
    border-width: 1px;
    margin: .5em 0 0 1em;
    /* Curves div Corners */
    border-radius: 1em;
}
/* --------------------*/

/* Big Box Div --------*/
 #content .big_box {
    background-color: #CCC;
    margin: 1em auto 4em auto;
    width: 690px;
    height: 483px;
    position:relative;
    /* Curves div Corners */
    border-radius: 1em;
    /* Give div Border */
    border-style: solid;
    border-width: 1px;
}
#content .big_box img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:auto;
}
/* ------ */

/* Footer */
 .footer {
    height: auto;
    margin: 0;
    display:inline;
    display:inline-block;
    width: 100%;
}
.footer .info {
    margin: 0;
    text-align: center;
}
.footer .info li + li::before {
    content:" | ";
    display: inline-block;
    margin-left: .5em;
    margin-right: .5em;
}
/* specifying the nav list horizontal */
 .footer li {
    display: inline;
    font-size:12px;
    text-align: center;
}
.footer a {
    text-decoration: none;
    display: inline-block;
}
.footer .info img {
    width: 8px;
    height: 8px;
}
<link href="http://cdn.jsdelivr.net/animatecss/3.2.0/animate.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div id="content">
        <div class="Designs_Drawings">
            <div class="Designs">
                <p>Designs</p>
                <div class="Thumbnails" data-animation="animated pulse">
                    <!-- <a href="images/Halloween/bat.png"><img src="images/Halloween/bat_sm.png" /></a>
 <a href="images/Halloween/frankenstein.png"><img src="images/Halloween/frankenstein_sm.png" /></a> -->
                </div>
            </div>
            <!-- End Designs -->
            <div class="Drawings">
                <p>Drawings</p>
                <div class="Thumbnails" data-animation="animated bounce"></div>
            </div>
            <!-- End Drawings -->
        </div>
        <!-- End Designs_Drawings -->
        <div class="Photography_WebSites">
            <div class="Photography">
                <p>Photography</p>
                <div class="Thumbnails" data-animation="animated bounce"></div>
            </div>
            <!-- End Photography -->
            <div class="WebSites">
                <p>Web Sites</p>
                <div class="Thumbnails" data-animation="animated bounce"></div>
            </div>
            <!-- End WebSites -->
        </div>
        <!-- End Photography_WebSites -->
    </div>
</div>

Answer №2

Make sure to wait for the document to be fully loaded before running your code. Here's how you can do it:

<script>
    $(function(){
        var animationName = 'animated bounce';
        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

        $('.Thumbnails').on('click', function() {
            $('.Thumbnails').addClass(animationName).one(animationEnd, function () {
                $(this).removeClass(animationName);
            });
        });
    });
    </script>

Don't forget to close the callback with a }); to avoid any JavaScript errors.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you explain the purpose of `import type {Node} from 'react';` and how it is used in the App component as: () => Node?

Executing the following command: npx react-native init AwesomeProject When reviewing the App.js file, I came across two lines that confuse me: import React from 'react'; import type {Node} from 'react'; // Line 1 import { SafeAreaVi ...

javascriptnode.jsreactjsreact-nativeimport

Is CORS required for an iOS client?

I created an API application using .NET API 2, and now I am looking to integrate this service with an iOS app. Do I need to enable CORS for the iOS app in order to access my API service? ...

ios.netajaxcors

Filtering an array of <input> values in JavaScript based on the number of characters they contain

Can someone help me figure out why this JavaScript code isn't working as expected? The intention is to grab the input value from a text box (a string of words separated by spaces), convert it into an array, and then remove any words that are less than ...

javascriptjqueryarraysfilter

The individual blog pages on my site are not receiving the static files they need to display

I'm facing an issue serving a css file to individual blog posts on my website's blog section. Here's how it's supposed to work: Visit /blog- you'll see the main blog page, which is functioning fine. However, when trying to access ...

cssnode.jsexpresspug

Exploring the power of AngularJS with JavaScript and utilizing the $scope

After spending the entire day trying to solve this issue, it seems like I might be missing something simple. Here's the problem at hand: I have a well-structured Nodejs/AngularJS application that utilizes Jade for templating. The server performs certa ...

javascriptangularjspugpartials

Utilizing Datatables for Dynamic Pagination in PHP with AJAX and MySQLi

Struggling with pagination in an AJAX datatable? You're not alone! I've been searching everywhere, reading manuals, and spending way too much time on this. But hey, doing it right in AJAX is important, right? I have a datatable with lots of reco ...

phpajaxdatatables

Fetching JSON data from a different domain using jQuery

Apologies if this has been asked before, but I couldn't locate the solution in any of the related discussions. My issue involves retrieving a json from an api and then parsing its contents, however, I'm facing challenges with the parsing process. ...

jsonapijqueryjsonp

Is there a way for me to access the data from my checkboxes?

When it comes to reading checkbox data, I've encountered some issues. After doing some research online, I stumbled upon the following code snippet. However, this code seems to be focused on deleting data using checkboxes. function deleteData() { ...

phpjquery

Stopping React from re-rendering a component when only a specific part of the state changes

Is there a way to prevent unnecessary re-renders in React when only part of the state changes? The issue I'm facing is that whenever I hover over a marker, a popup opens or closes, causing all markers to re-render even though 'myState' rema ...

javascriptreactjsreact-hooksreact-componentreact-state-management

"Customizing FusionCharts: A step-by-step guide to changing the background color

Is there a way to modify the background color of fusionchart from white to black? Additionally, how can I change the font color in the chart? ...

javascriptangularjsfusioncharts

I continuously encounter "undefined" when attempting to retrieve collections

Despite my best efforts, I am unable to retrieve the data from the server using the snapshot docs. I have verified that the collection is named "creaciones" in lowercase. There is one document in the collection with existing data. I have double-checked fo ...

javascripthtmlfirebase

What could be causing my bounce animation to begin 50 pixels higher than its intended starting point?

Trying to create a bouncing effect on text Check out my attempt here. It seems like the bug is in this area. @keyframes bounce{ 0%, 40%{ transform:scale(2,.5) translate(0,100px); } 45%,55%{ transform:translate(0,-50px); } 55%, 100%{ ...

javascripthtmlcssanimation

Vue's v-on:click feature stops functioning correctly post-build

I have successfully integrated the Vue slide example from this link into my Angular template. Everything works fine when running ng serve, but after building with ng build and then trying to start it again with ng serve or from the dist folder using npm s ...

javascriptjquerynode.jsangularvue.js

The Angular.js UIBootstarp Timepicker is displaying the "ng-invalid" class when used with an input type of "number"

Currently, I am working on incorporating a time picker using UIBootstrap and angular.js. By default, the timepicker utilizes {{input type="text}} for capturing hours and minutes. However, since I intend to use this feature on mobile devices, I need to di ...

javascriptandroidangularjsangular-ui-bootstrap

Exploring Vue.prototype attributes and utilizing them

I'm facing a challenge while attempting to globally set a property using Vue.prototype. This is what I currently have: microsoftTeams.initialize(); microsoftTeams.getContext((context) => { Vue.prototype.$teamsContext = true; }); new Vue({ ...

javascriptvue.jsvuejs2

How to link an external CSS file to a Vue.js project

I created a new project using @vue/cli and now I want to add an external CSS file to my App.vue Here's what I attempted: <template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | ...

javascriptcssvue.jswebpack

Are trailing commas or missing keys acceptable in JavaScript object notation?

I have created a code generator and I am contemplating whether or not to address the issue of the extra comma at the end. While Internet Explorer seems to ignore it, I want to ensure cross-browser compatibility and generate valid code. function init() { v ...

javascriptjson

Using jQuery to interact with a web service - overcoming cross-domain restrictions

Attempting to connect to a WCF service using a jQuery client. Referencing this specific example: http://www.codeproject.com/KB/aspnet/WCF_JQUERY_ASMX.aspx#4 Everything functions properly when the client webpage is on the same domain as the service. Howe ...

jqueryajaxwcfjsoncross-domain

I recently edited my htaccess file to redirect my webpage, but now I'm facing issues with my CSS, images, and

Here is the htaccess code I am using: RewriteRule ^example1/([A-Za-z-]+)/?$ example2.php?name=$1 [NC] The page is loading, but the CSS and JS are not rendering correctly. Can anyone assist me in resolving this issue? ...

phphtmlcss.htaccess

Django DRF functions properly, however it returns an error when sending a response to an AJAX request

Successfully implemented an AJAX request using PUT in DRF. All functionalities are functioning correctly except for the error callback being triggered: DRF section: class ProductDataViewSet(viewsets.ViewSet): authentication_classes = [SessionAuthentic ...

javascriptjquerydjangoajaxdjango-rest-framework