Question

我有这个简单的jQuery逻辑，如何将其转换为纯JavaScript？

我不知道从哪里开始不幸。任何帮助将非常感激。

 $(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");
    });
});

编辑：CSS解决方案可能在这里工作得最好，但作为一个学习目的，我想看看纯JS在这种情况下是如何工作的。

Answer 1

您可以尝试以下代码。最好的方法是声明一些CSS并通过javascript调用它们或仅使用CSS。但正如你所要求我尝试使用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动画函数到纯JavaScript

1 个答案: