Using regular JS (not JQuery) I am trying to make some images shake after they are clicked but it is not working.

HTML:

    <img id='s1_imgB' class="fragment"... onClick="wrongAnswer()"...

JS:

    function wrongAnswer(){ 
        document.getElementById("s1_imgB").style.className = "shake";

CSS:

    .shake:hover {....

I can get the elements to shake by default using the following html. But, I want to have the CSS animation initiate after the image is clicked.

HTML:

    <img id='s1_imgB' class="fragment shake"....

When the page loads, the mouse hover affect should be inactive, then after the image is clicked, the mouse hover should cause the image to shake.

What am I doing wrong? Thanks

Using regular JS (not JQuery) I am trying to make some images shake after they are clicked but it is not working.

HTML:

    <img id='s1_imgB' class="fragment"... onClick="wrongAnswer()"...

JS:

    function wrongAnswer(){ 
        document.getElementById("s1_imgB").style.className = "shake";

CSS:

    .shake:hover {....

I can get the elements to shake by default using the following html. But, I want to have the CSS animation initiate after the image is clicked.

HTML:

    <img id='s1_imgB' class="fragment shake"....

When the page loads, the mouse hover affect should be inactive, then after the image is clicked, the mouse hover should cause the image to shake.

What am I doing wrong? Thanks

• javascript
• css
• html
• reveal.js

Share Improve this question Follow asked Dec 23, 2016 at 11:35 user2806040user2806040 3

• we need a little bit more than .. to help you. – theoretisch Commented Dec 23, 2016 at 11:37
• <img id='s1_imgB' class="fragment shake" onclick="wrongAnswer()"... – TheWandererr Commented Dec 23, 2016 at 11:38
• 1 You can have a look at this http://stackoverflow./questions/8645361/shake-a-login-form-on-error – samar Commented Dec 23, 2016 at 11:39

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

I think it should be

document.getElementById("s1_imgB").className += " shake";

I think it should be like that:

function wrongAnswer(){ 
document.getElementById("s1_imgB").className = "shake";

without (.style )

You should remove the :hover identifier in your css, as it may only apply those styles after you have clicked the image and then move the mouse to trigger a hover. You would also then get the shake every time you mouseover the image. Adding the class (without hover) with JS should apply the shake styles.

You may also want to append the shake class, at the moment you are replacing fragment with shake. But it's unclear if you need to do that based on the info you've supplied.

document.getElementById("s1_imgB").className += " shake";

Just add the class that do the shaking-animation, when the image is clicked. Basically it is just one line:

document.getElementById('s1_imgB').classList.add("shake");

To remove the class just do:

document.getElementById('s1_imgB').classList.remove("shake");

Here is a jsfiddle that does this.

The shaking animation is from this site.

I hope I helped you.

For me the solution was a bit more tricky (togle style ON, wait a bit and then turn it OFF again so that image shakes every time I click it, not only the first time):

            var es = document.getElementById("img");
            if (es != null) {
                es.classList.toggle("shakeit");
                setTimeout(() => (es.classList.toggle("shakeit")), 550)
            }

Heres my personal solution:

const Shake=(e)=>{
  document.querySelector(e).classList.add("shake");
  setTimeout(()=>
    {document.querySelector(e).classList.remove("shake")},1000);
};

document.getElementById("elm").addEventListener("click",()=>{
  Shake("#elm");
});

#elm {
  position: fixed;
  top: 10px;
  left: 10px;
  height: 100px;
  aspect-ratio: 1 / 1;
  background: green;
  cursor: pointer;
}
.shake {
  animation: shakefx 1000ms ease-in-out;
}
@keyframes shakefx {
  0%{transform:translate(-5%,-5%) rotate(-2deg);}
  10%{transform:translate(2%,-4%) rotate(1deg);}
  20%{transform:translate(-3%,3%) rotate(-1deg);}
  30%{transform:translate(-4%,5%) rotate(.5deg);}
  40%{transform:translate(-5%,3%) rotate(-1deg);}
  50%{transform:translate(2%,-4%) rotate(3deg);}
  60%{transform:translate(-3%,3%) rotate(-2deg);}
  70%{transform:translate(-5%,5%) rotate(.5deg);}
  80%{transform:translate(-5%,3%) rotate(1deg);}
  90%{transform:translate(2%,-4%) rotate(-1deg);}
  100%{transform:translate(0%,0%) rotate(0deg);}
}

<div id="elm"></div>