Rotate a div for 30 seconds Jquery

Question

Rotate a div for 30 seconds Jquery

Navigation

#1 by (7 votes)
#2 by (1 votes)
#3 by (0 votes)

2

Greetings, my query is as follows:

I have a div block which I need to keep rotating for X amount of seconds, I have tried some Jquery libraries but I have not been able to control the time it keeps turning and the speed, this is important. Greetings.

html, body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item{
    height: 20rem;
    width: 20rem;
    background-color: darkslategrey;
}

<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="item" class="item"></div>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

javascript jquery html5 html

asked by Alejandro Gutierrez 24.12.2016 в 15:25

source

3 answers

1

Here is an example without using any additional libraries. We use the functions setTimeout and setInterval , in addition to applying the CSS using JS transform : rotate(angulo deg)

var TIEMPO_1_GRADO = 10 // 10 ms
var TIEMPO_TOTAL   = 5 * 1000 // 5 segundos
var anguloActual  = 0
var divGirar       = document.getElementById('div-girar')
function girar(){
  if(anguloActual == 360) anguloActual = 0
  divGirar.style.transform = 'rotate(' + anguloActual + 'deg)'
  anguloActual++
}

var intervalID = setInterval(girar, TIEMPO_1_GRADO)

setTimeout(function(){
  clearInterval(intervalID)
}, TIEMPO_TOTAL)

html, body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item{
    height: 20rem;
    width: 20rem;
    background-color: darkslategrey;
}

<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="div-girar" class="item"></div>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

answered by 24.12.2016 в 16:34

0

Using $.animate , you could do the following:

$("#start").click(function() {
  $("#item").animate({
    left: 90
  }, {
    step: function(now,fx) {
      $(this).css('transform','rotate('+now+'deg)');  
    },
    duration: 3000
  });
});

.item{
  height: 100px;
  width: 100px;
  background-color: darkslategrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="item" class="item"></div>

<button id="start">Animar!</button>

Explanation:

In this case I use the property left (could use any other) which will not affect in any way the location of it (since the element is not positioned absolutely). The trick is to modify a property that does not really affect the element, but at each step ( step ) of the animation, gradually rotate the element using transform','rotate([GRADOS]deg) .

answered by 24.12.2016 в 16:28

NodeJs gives me this error when starting Get only month and day using SELECT in SQL server

score 7 · Accepted Answer

You can do: sec = 60 / rpm to know the duration of a turn, knowing this you can animate via @keyframes .

const btn = document.querySelector('#go');
const box = document.querySelector('.box');
const rpm = document.querySelector('#rpm');
const timeout = document.querySelector('#timeout');
let tid = null; // timeout id

go.addEventListener('click', () => {
  const sec = 60 / parseInt(rpm.value);
  const millisec = parseInt(timeout.value) * 1000;
  rotate.stop();
  rotate.start(sec, millisec);
});

const rotate = {
  stop() {
  	if (tid) {
  		window.clearTimeout(tid);
    }
  	box.removeAttribute('style');
    box.classList.remove('animated');
  },
  start (sec, millisec) {
  	box.style.animationDuration = '${sec}s';
    box.classList.add('animated');
    tid = window.setTimeout(() => {
      box.classList.remove('animated');
    }, millisec);
  }
}

//rotate();

body {
  background-color: #FFF;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.form {
  align-items: center;
  display: flex;
  flex: 0 0 70px;
  justify-content: space-around;
}
.form input {
  border: 1px solid #DDD;
  border-radius: 3px;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.1) inset;
  color: #444;
  font-family: 'open sans';
  font-size: 14px;
  height: 35px;
  padding: 0 .5rem;
}
.form input:focus {
  border-color: rgba(0, 188, 255, .7);
  outline: none;
}
.form button {
  background-color: #1abc9c;
  border: 1px solid transparent;
.  border-radius: 3px;
  color: #fff;
  font-family: 'Open Sans';
  font-size: 14px;
  height: 35px;
  padding: 0 1rem;
}
.form button:active {
  background-color: #16a085;
}
.form button:focus {
  outline: none;
}
.draw {
  align-items: center;
  display: flex;
  flex:  1;
  justify-content: center;
}
.box {
  background-color: #f39c12;
  border-radius: 4px;
  height: 80px;
  width: 80px;
}
.box.animated {
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<section class="form">
  <input type="number" id="rpm" placeholder="Ingresa las RPM" required>
  <input type="number" id="timeout" placeholder="Ingrese tiempo límite (seg)" required>
  <button id="go">Aplicar</button>
</section>
<section class="draw">
  <div class="box"></div>
</section>