CODEWITHSUNDEEP
javascriptjqueryhtmlcss
qunz666
qunz666

Reputation: 310

How to control animation time from css use jQuery

I work with animation in CSS, and I have animated clock, which are working using HTML and CSS.

But I want to control animation time using jQuery.

My code:

.face {
    position: absolute;
    top: 10%;
    left: 69%;
    transform: translate(-50%, -50%);
    height: 100px;
    width: 100px;
    border: 5px solid #d14019;
    border-radius: 50%;
}

.hand {
    height: 35px;
    width: 5px;
    background-color: #d14019;
    position: absolute;
    border-radius: 20%;
    top: 50px;
    left: 48px;
    transform-origin: 50% 0%;
    animation: hourHand 3s linear infinite;
}

@keyframes hourHand {
    100% {
        transform: rotate(360deg);
    }
}
<div class="face">
 <div class="hand"></div>
</div>

As u can see at this line:

animation: hourHand 3s linear infinite;

I have time animation 3s, but this values i wanna control by jQuery code. For example, this 3s i want to change to 14s, or 5s, or 22s.

Upvotes: 1

Views: 68

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

To amend the speed with jQuery you can create some logic which controls the animation-duration property. In the example below it adds some classes to change the setting:

var $hand = $('.hand');

$('#faster').click(function() {
  $hand.removeClass('slow').addClass('fast');
});

$('#slower').click(function() {
  $hand.removeClass('fast').addClass('slow');
});
.face {
  position: absolute;
  top: 10%;
  left: 69%;
  height: 100px;
  width: 100px;
  border: 5px solid #d14019;
  border-radius: 50%;
}

.hand {
  height: 35px;
  width: 5px;
  background-color: #d14019;
  position: absolute;
  border-radius: 20%;
  top: 50px;
  left: 48px;
  transform-origin: 50% 0%;
  animation: hourHand 3s linear infinite;
}
.hand.fast {
  animation-duration: 1s;
}
.hand.slow {
  animation-duration: 5s;
}


@keyframes hourHand {
  100% {
    transform: rotate(360deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="face">
  <div class="hand"></div>
</div>

<button id="faster">Faster</button>
<button id="slower">Slower</button>

I want to define the time. For example now I have 3s, but from JS script I want to change this value

In this case you can use css() to set the value in JS directly:

var $hand = $('.hand');

$('#faster').click(function() {
  $hand.css('animation-duration', '1s');
});

$('#slower').click(function() {
  $hand.css('animation-duration', '5s');
});
.face {
  position: absolute;
  top: 10%;
  left: 69%;
  height: 100px;
  width: 100px;
  border: 5px solid #d14019;
  border-radius: 50%;
}

.hand {
  height: 35px;
  width: 5px;
  background-color: #d14019;
  position: absolute;
  border-radius: 20%;
  top: 50px;
  left: 48px;
  transform-origin: 50% 0%;
  animation: hourHand 3s linear infinite;
}
.hand.fast {
  animation-duration: 1s;
}
.hand.slow {
  animation-duration: 5s;
}


@keyframes hourHand {
  100% {
    transform: rotate(360deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="face">
  <div class="hand"></div>
</div>

<button id="faster">Faster</button>
<button id="slower">Slower</button>

Upvotes: 4

Related Questions