jQuery animate function to pure JavaScript

Question

I have this simple jQuery logic, How would I convert that into pure JavaScript?

I have no clue where to start unfortunately. Any help would be extremely appreciated.

 $(function() {
  // OPACITY OF BUTTON SET TO 0%
  $(".rollstate").css("opacity", "0");

  // ON MOUSE OVER
  $(".rollstate").hover(function() {

      // SET OPACITY TO 70%
      $(this).stop().animate({
        opacity: .5
      }, "fast");
    },


    // ON MOUSE OUT
    function() {

      // SET OPACITY BACK TO 50%
      $(this).stop().animate({
        opacity: 0
      }, "slow");
    });
});

EDIT: a CSS solution would probably work best here, but as a learning purpose I would like to see how the pure JS would work in this case.

You can try to do it in vanilla js by moving it.. but i don't think its as performant as css animate — carinlynchin, Aug 22 '17 at 17:06
sure that would work I guess but as a learning purposes I wanted to know how that kind of code would work in pure JS. — user2513846, Aug 22 '17 at 17:06
Animations in pure JS are somewhat complicated, you need calculations and timers etc. Why not look at how [jQuery does it](https://j11y.io/jquery/#v=1.11.2&fn=jQuery.Animation), or any other such library. — adeneo, Aug 22 '17 at 17:09
There is also [this pretty good article](http://blog.bigbinary.com/2010/01/25/how-animate-really-works-in-jquery-simple-animation-case-discussed.html) with a more high level explaination. — Namaskar, Aug 22 '17 at 17:11
I understand but I'm in the process of dropping jQuery seeing its used many times to do the kind of code above, so I was hoping for a pure JS solution. A CSS solution I can probably figure it out but pure JS is above my skills. I have been seeing all over the net "drop jQuery" articles and comments and then again when it comes to the use of pure JS you hear things like "well it's not that easy" etc... trying to understand why this aggressive drop jQuery when apparently is just so hard to do things in pure JS. — user2513846, Aug 22 '17 at 17:13
https://stackoverflow.com/questions/2999749/performance-of-css-transitions-vs-js-animation-packages — Taplar, Aug 22 '17 at 17:16
jQuery is a JavaScript library intended to simplify complex JS things like animations... And it enables the use of a ton cool plugins. I don't know where that *trend idea* of dropping jQuery comes from. — Louys Patrice Bessette, Aug 22 '17 at 17:20

score 0 · Answer 1 · edited Aug 22 '17 at 19:00

You can try the code below. The best would be to declare some CSS and call those by javascript or only use CSS. But as you requested I tried a bit using vanilla javascript.

var element = document.getElementById('rollstate');
element.style.opacity = "0";
element.style.filter  = 'alpha(opacity=0)';//for IE

document.getElementById("rollstate").onmouseover = function() {mouseOver()};
document.getElementById("rollstate").onmouseout = function() {mouseOut()};

function mouseOver() {
  var element1 = document.getElementById('rollstate');
element1.style.opacity = "5";
element1.style.filter  = 'alpha(opacity=5)';
element1.className += 'faded';
}


function mouseOut() {
  var element2 = document.getElementById('rollstate');
element2.style.opacity = "0";
element2.style.filter  = 'alpha(opacity=0)';
element2.className += 'faded';
}

#rollstate {
    -webkit-transition: opacity 1s;
    opacity: 1;
}

#rollstate.faded {
    opacity: 0;
}

<html>
<body>
<p>hover Below</p>
<input type ="button" id="rollstate" value="click me"/>
</body>
</html>

jQuery animate function to pure JavaScript

1 Answers1