Transition on javascript funtion

Question

Is it possible to add transitions in javascript functions such as CSS transitions? On the snippet it would be the fading effect on background changing colors when clicking the buttons.

$("#btn1").click(function() {
 $('body').removeClass();
 $('body').addClass('class1');
});

$("#btn2").click(function() {
 $('body').removeClass();
 $('body').addClass('class2');
});

$("#btn3").click(function() {
 $('body').removeClass();
 $('body').addClass('class3');
});

body {align-items: center;
justify-content: center;
text-align: center;
}

body.class1 {
background-color: red;
}

body.class2 {
background-color: green;
}

body.class3 {
background-color:powderblue;
}

button {padding: 15px 32px;
margin: 80px 10px;
font-size: 16px;
border-radius: 12px;
border: 2px solid black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="class1">
<button id="btn1">RED</button>
<button id="btn2">GREEN</button>
<button id="btn3">BLUE</button>
</body>

Possible duplicate of [Transition of background-color](https://stackoverflow.com/questions/4411306/transition-of-background-color). Add `transition` in CSS of main element and then change classes using JavaScript. — Mirek Długosz, Nov 04 '17 at 20:40
Why do you want to do this in pure JavaScript, when all browsers released in last 5 years (accounting for around 95% of all browsers used worldwide) support CSS transitions just fine? Please consider updating your post with that information. — Mirek Długosz, Nov 04 '17 at 21:15

score 0 · Answer 1 · answered Nov 04 '17 at 20:42

0

Try this

<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
    border: 1px solid black;
    background-color: lightblue;
    width: 270px;
    height: 200px;
    overflow: auto;
}

#myDIV:hover {
    background-color: coral;
    width: 570px;
    height: 500px;
    padding: 100px;
    border-radius: 50px;
}
</style>
</head>
<body>



<div id="myDIV">
  <h1>myDIV</h1>
</div>

<script>

    document.getElementById("myDIV").style.WebkitTransition = "all 2s"; // Code for Safari 3.1 to 6.0
    document.getElementById("myDIV").style.transition = "all 2s";       // Standard syntax

</script>
</body>
</html>

answered Nov 04 '17 at 20:42

Muhammad Usman

10,039
22
39

What is the point of adding `transition` through JavaScript, when defining it in CSS works just fine (and will still work for these few people who block JavaScript)? – Mirek Długosz Nov 04 '17 at 20:45
_Is it possible to add transitions in javascript functions such as CSS transitions?_, this is what asked in question – Muhammad Usman Nov 04 '17 at 20:48
I'd say that OP wants background to smoothly change and don't know that plain CSS can do that, so they ask for JavaScript solution. I interpret this question as [XY problem](https://meta.stackexchange.com/q/66377/312562). – Mirek Długosz Nov 04 '17 at 20:53
My question is about adding transitions in javascript function, if the answer would be adding transitions in CSS i wouldn't do the question. – Aspid Nov 04 '17 at 21:00
no, i try diferent ways, document.getElementById, document.getElementsByClassName, but i'm not able to make it. But if it works, is exactly what @Usman Rana shows what i'm looking for – Aspid Nov 04 '17 at 21:13

Sanchit Patiyal · Accepted Answer · 2017-11-04T21:26:18.817

Just Add transition in the CSS itself like this.

$("#btn1").click(function() {
  $('body').removeClass();
  $('body').addClass('class1');
});

$("#btn2").click(function() {
  $('body').removeClass();
  $('body').addClass('class2');
});

$("#btn3").click(function() {
  $('body').removeClass();
  $('body').addClass('class3');
});

body {
  align-items: center;
  justify-content: center;
  text-align: center;
}

body.class1 {
  background-color: red;
  -webkit-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear;
  transition: background-color 1000ms linear;
}

body.class2 {
  background-color: green;
  -webkit-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear;
  transition: background-color 1000ms linear;
}

body.class3 {
  background-color: powderblue;
  -webkit-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear;
  transition: background-color 1000ms linear;
}

button {
  padding: 15px 32px;
  margin: 80px 10px;
  font-size: 16px;
  border-radius: 12px;
  border: 2px solid black;
}

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

<body class="class1">
  <button id="btn1">RED</button>
  <button id="btn2">GREEN</button>
  <button id="btn3">BLUE</button>
</body>

If you want to do it with jquery only then you can use it like this .addClass( className [, duration ] [, easing ] [, complete ] )

NOTE: But you've to add jquery-ui.js file to make it work.

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

$("#btn1").click(function() {
 $('body').removeClass();
 $('body').addClass('class1',1000, "easeOutBounce" );
});

$("#btn2").click(function() {
 $('body').removeClass();
 $('body').addClass('class2',1000, "easeOutBounce" );
});

$("#btn3").click(function() {
 $('body').removeClass(); 
 $('body').addClass('class3',1000, "easeOutBounce" );
});

body {align-items: center;
justify-content: center;
text-align: center;
}

body.class1 {
background-color: red;
}

body.class2 {
background-color: green;
}

body.class3 {
background-color:powderblue;
}

button {padding: 15px 32px;
margin: 80px 10px;
font-size: 16px;
border-radius: 12px;
border: 2px solid black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<body class="class1">
<button id="btn1">RED</button>
<button id="btn2">GREEN</button>
<button id="btn3">BLUE</button>
</body>

Good solution, but doesn´t answer my question. Anyway i wil try it. Thanks. — Aspid, Nov 04 '17 at 21:04
That´s it! I checked the answer as good. Doesn´t work with background-image, i gues is more complicated. https://codepen.io/danielillo/pen/VrampV — Aspid, Nov 04 '17 at 21:46
https://stackoverflow.com/questions/2983957/animate-background-image-change-with-jquery looks kind of complicated — Sanchit Patiyal, Nov 04 '17 at 21:57

Transition on javascript funtion

2 Answers2

Linked