Implement a CSS animation for the h1 element when a button is clicked, with the help of either JQuery

Question

Implement a CSS animation for the h1 element when a button is clicked, with the help of either JQuery

Hey there! I have a heading (h1) and a button on my webpage. I've created a cool animation using CSS that I want to apply to the h1 when the button is clicked using JQuery.

The idea is that when the button is clicked, the animation should add more content to the h1 element. The problem is, currently the animation starts as soon as the HTML loads, but I want it to start only when the button is clicked.

Since I'm still learning these skills, I find complex answers confusing. Could someone please guide me through this?

Below is the snippet of HTML code:

<div class="container-fluid center" id="mainPage">
    <div id="heading" class="row">
        <h1 id="wishH1">NAME!</h1>
    </div>
</div>
<div class="container-fluid center" id="gift">
    <button type="button" id="giftButton">
        <img id="giftImg" src="gift.png">
    </button>
</div>

And here's how the CSS looks like:

@keyframes wish {
  25% {
    content: : "hi ";
  }
  50% {
    content: : "hello ";
  }
  75% {
    content: "hola ";
  }
}

#wishH1::before {
  content: "hey there ";
  animation: wish 20s linear infinite;
}

Additionally, this is the JQuery script I've tried:

I've made multiple attempts with different comments in the code block below but none seem to work. They either don't trigger the animation or start automatically without waiting for the button click.

$('#giftButton').click(function() {
  $("#gift").fadeOut(1500);

  // Various attempts to start the animation after clicking the button
  /*$("#wishH1").css("animation",wish);
    $("#wishH1").css("animation-duration",6s);
    $("#wishH1").css("animation-timing-function",linear);
    $("#wishH1").css("animation-iteration-count",infinite);*/
  
  setTimeout(function() {
    $("#gift").fadeIn(1500);
  }, 20000);
});

This is how the h1 changes during the animation:

hey there NAME!

hi NAME!

hello NAME!

hola NAME!

If anyone can help me understand what adjustments need to be made in the JQuery code or if any changes are required in the CSS for the desired output, I would greatly appreciate it. Thank you!

Also, apologies if my question isn't clear enough, it's my first time asking one. Thank you for your patience.

javascript html jquery css

Answer 1

Answer №1

In order to trigger the animation after a click event, you cannot directly target pseudo elements (such as ::before) in jQuery since they are not part of the DOM. Instead, you can apply a specific class (animation-start) to the parent element and manipulate its pseudo elements using CSS.

$('#giftButton').click(function() {
  $("#gift").fadeOut(1500);
  $('#wishH1').addClass('animation-start');
  setTimeout(function() {
    $("#gift").fadeIn(1500);
  }, 20000);
});

@keyframes wish {
  25% {
    content: "hi ";
  }
  50% {
    content: "hello ";
  }
  75% {
    content: "hola ";
  }
}

#wishH1::before {
  content: "hey there ";
}

#wishH1.animation-start::before {
  animation: wish 5s linear infinite;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid center" id="mainPage">
  <div id="heading" class="row">
    <h1 id="wishH1">NAME!</h1>
  </div>
</div>
<div class="container-fluid center" id="gift">
  <button type="button" id="giftButton">
        <img id="giftImg" src="gift.png">
    </button>
</div>

The issue with extra semicolons in your CSS could have been causing some problems for you.

@keyframes wish{
25%{
    content:: /* here */ "hi "; 
}
50%{
    content:: /* here */ "hello "; 
}
75% {
    content: "hola ";
}

Answer 2

In order to trigger the animation after a click event, you cannot directly target pseudo elements (such as ::before) in jQuery since they are not part of the DOM. Instead, you can apply a specific class (animation-start) to the parent element and manipulate its pseudo elements using CSS.

$('#giftButton').click(function() {
  $("#gift").fadeOut(1500);
  $('#wishH1').addClass('animation-start');
  setTimeout(function() {
    $("#gift").fadeIn(1500);
  }, 20000);
});

@keyframes wish {
  25% {
    content: "hi ";
  }
  50% {
    content: "hello ";
  }
  75% {
    content: "hola ";
  }
}

#wishH1::before {
  content: "hey there ";
}

#wishH1.animation-start::before {
  animation: wish 5s linear infinite;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid center" id="mainPage">
  <div id="heading" class="row">
    <h1 id="wishH1">NAME!</h1>
  </div>
</div>
<div class="container-fluid center" id="gift">
  <button type="button" id="giftButton">
        <img id="giftImg" src="gift.png">
    </button>
</div>

The issue with extra semicolons in your CSS could have been causing some problems for you.

@keyframes wish{
25%{
    content:: /* here */ "hi "; 
}
50%{
    content:: /* here */ "hello "; 
}
75% {
    content: "hola ";
}

Answer 3

Answer №2

The issue lies in the CSS code where the animation is directly set, instead of adding it on click.

You should modify it to something like this:

CSS

@keyframes greeting{
25% {
    content: "hi ";
}
50% {
    content: "hello ";
}
75% {
    content: "hola ";
}
}
#wishH1::before {
  content: "hey there ";
}

#wishH1.active::before {
  animation: greeting 2s linear infinite;
}

JavaScript

$('#giftButton').click(function(){
$('#wishH1').addClass('active');
$("#gift").fadeOut(1500);
setTimeout(function() {
  $("#gift").fadeIn(1500);
    $('#wishH1').removeClass('active');
}, 20000);
});

Answer 4

The issue lies in the CSS code where the animation is directly set, instead of adding it on click.

You should modify it to something like this:

CSS

@keyframes greeting{
25% {
    content: "hi ";
}
50% {
    content: "hello ";
}
75% {
    content: "hola ";
}
}
#wishH1::before {
  content: "hey there ";
}

#wishH1.active::before {
  animation: greeting 2s linear infinite;
}

JavaScript

$('#giftButton').click(function(){
$('#wishH1').addClass('active');
$("#gift").fadeOut(1500);
setTimeout(function() {
  $("#gift").fadeIn(1500);
    $('#wishH1').removeClass('active');
}, 20000);
});

Answer 5

Answer №3

CSS

<style>
  h1 {
    color: blue;
    font-size: 24px;
  }

JAVASCRIPT

let interval;
let i = 0;
let colors = ['red', 'green', 'blue'];

$('#changeColor').on("click", function () {
  interval = setInterval(function () {
    if (i >= colors.length) {
      i = 0;
    }
    $('h1').css('color', colors[i]);
    i++;
  },
    1000);
})

HTML

<h1 id="changeColor">Change My Color!</h1>
<button type="button" id="colorButton">Click Me</button>

Answer 6

CSS

<style>
  h1 {
    color: blue;
    font-size: 24px;
  }

JAVASCRIPT

let interval;
let i = 0;
let colors = ['red', 'green', 'blue'];

$('#changeColor').on("click", function () {
  interval = setInterval(function () {
    if (i >= colors.length) {
      i = 0;
    }
    $('h1').css('color', colors[i]);
    i++;
  },
    1000);
})

HTML

<h1 id="changeColor">Change My Color!</h1>
<button type="button" id="colorButton">Click Me</button>

Answer 7

Answer №4

Although it's not possible to directly manipulate the style of a pseudo element using Javascript, you can achieve the desired effect by setting a CSS variable on the actual element which will be reflected in the pseudo element.

To start off, we set --name: none and then use Javascript (or jquery) to update the CSS variable to wish triggering the animation.

document.querySelector('button').addEventListener('click', function () {
  document.querySelector('#wishH1').style.setProperty('--name', 'wish');
});

@keyframes wish{
25%{
    content: "hi ";
}
50%{
    content: "hello ";
}
75% {
    content: "hola ";
}
}

#wishH1 {
  --name: none;
}
#wishH1::before {
  content: "Hey there ";
  animation: var(--name) 20s linear infinite;
}

<div class="container-fluid center" id="mainPage">
    <div id="heading" class="row">
        <h1 id="wishH1">NAME!</h1>
    </div>
</div>
<div class="container-fluid center" id="gift">
    <button type="button" id="giftButton">
        <img id="giftImg" src="gift.png">
    </button>
</div>

Answer 8

Although it's not possible to directly manipulate the style of a pseudo element using Javascript, you can achieve the desired effect by setting a CSS variable on the actual element which will be reflected in the pseudo element.

To start off, we set --name: none and then use Javascript (or jquery) to update the CSS variable to wish triggering the animation.

document.querySelector('button').addEventListener('click', function () {
  document.querySelector('#wishH1').style.setProperty('--name', 'wish');
});

@keyframes wish{
25%{
    content: "hi ";
}
50%{
    content: "hello ";
}
75% {
    content: "hola ";
}
}

#wishH1 {
  --name: none;
}
#wishH1::before {
  content: "Hey there ";
  animation: var(--name) 20s linear infinite;
}

<div class="container-fluid center" id="mainPage">
    <div id="heading" class="row">
        <h1 id="wishH1">NAME!</h1>
    </div>
</div>
<div class="container-fluid center" id="gift">
    <button type="button" id="giftButton">
        <img id="giftImg" src="gift.png">
    </button>
</div>

Implement a CSS animation for the h1 element when a button is clicked, with the help of either JQuery

Answer №1

Answer №2

CSS

JavaScript

Answer №3

Answer №4

Similar questions

Necessity of "position: relative" in Bootstrap 4 Scrollspy

What is the best way to keep a header row in place while scrolling?

Triggering a JavaScript function when the mouse moves off an element

What are the steps to resolve the error 'content-type missing boundary' and encountering the issue with getBoundary not being recognized as a function?

The expected functionality of padding in a wrapper/parent element is not being achieved

In an HTML form, there are two fields to input registration number and full name. I need a script in JavaScript that automatically fills in the full name field when the corresponding registration number is entered

The challenge of handling Set type in TypeScript errors

Another option instead of using the .siblings() method would be

Converting JSON data retrieved from a URL into HTML format

JavaScript: organizing data by category with summarization

Transitioning in Vue.js can be triggered by changing a value up or down

Encountering "Error: Class constructor vA cannot be invoked without 'new'" when using Angular 10 Kendo Grid

Making changes to a JSON File

Discover a faster way to access object properties suggestions in vscode similar to Chrome console

PHP and HTML form: The ultimate guide to sending emails through your website

"Share your social media profiles without redirecting users to new tabs

Problem with personalized Domino login page

What's the best way to maintain the return type of a function as Promise<MyObject[]> when using forEach method?

Having issues retrieving tweets from my Twitter account, even though I am able to successfully post tweets

Alignment of text to the left can be achieved by using either relative or absolute