jQuery将函数动画化为纯JavaScript

Question

I have this simple jQuery logic, How would I convert that into pure JavaScript? 我有这个简单的jQuery逻辑，如何将其转换为纯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. 编辑：CSS解决方案可能在这里效果最好，但出于学习目的，我想看看在这种情况下纯JS的工作原理。

Answer 1

You can try the code below. 您可以尝试下面的代码。 The best would be to declare some CSS and call those by javascript or only use CSS. 最好是声明一些CSS并通过javascript调用它们或仅使用CSS。 But as you requested I tried a bit using vanilla javascript. 但根据您的要求，我尝试使用香草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将函数动画化为纯JavaScript

问题描述

1 个解决方案

解决方案1
0 2017-08-22 17:52:10

jQuery将函数动画化为纯JavaScript

问题描述

1 个解决方案

解决方案1 0 2017-08-22 17:52:10

解决方案1
0 2017-08-22 17:52:10