onmouseover onmouseout fadeIn fadeOut没有jQuery [英] onmouseover onmouseout fadeIn fadeOut no jQuery

问题描述

我正在寻找一种优雅的解决方案，以便在鼠标悬停时在不使用jQuery的情况下在鼠标悬停时淡入和淡出HTML元素(称我为老式).

从理论上讲，以下js解决方案应该可以工作，但是我遇到了问题，有人可以向我指出正确的方向或提供替代解决方案吗?

我的Js函数是，插入的HTML与页面上的HTML相同...

function fadeIn(element) {

   for (i = 0; i < 100; i++) {
      var value = 0 + i;


      element.style.opacity = value;
      element.style.filter = 'alpha(opacity=' + value + ')';
   }
}

function fadeOut(element) {

   for (i = 0; i < 100; i++) {
      var value = 100 - i;

      element.style.opacity = value;
      element.style.filter = 'alpha(opacity=' + value + ')';
      element.innerHTML = "<div class='container' id='container' onmouseover='fadeOut(this)'><img src='./images/myImage.jpg' onload='fadeIn(this.parent)' /></div>";

   }
}

解决方案

您的fadeIn/Out不能正常工作，因为您没有做任何事情来控制变化率.这将立即执行并显示/隐藏元素.

尝试这样的事情:

function fadeIn(el) {
   var opac = 0;
   var i = setInterval(function() {
     opac += 10;
     if (opac >= 100) {
       clearInterval(i);
       opac = 100;
     }
     el.style.opacity = opac;
     el.style.filter = 'alpha(opacity=' + opac + ')';

   }, 20);
}

那应该会在200毫秒内消失(20 * 100/10).播放数字以调整速度.

对于鼠标悬停/输出，您可以像绑定其他事件一样绑定事件.

通常，不喜欢使用HTML属性附加像您一样的JS事件.通常，您会有这样的帮助者: https://gist.github.com/955642

您要编写自己的方法，以检查浏览器支持的主要方法是addEventListener还是attachEvent.

Im looking for an elegant solution for a fade in and out of an HTML element onmouseover on mouseout without using jQuery (call me old fashioned).

In theory the below js solution should work however I am having problems with it working could someone point me in the right direction or offer an alternative solution??

My Js functions are and the HTML which is inserted is the same as which is on the page...

function fadeIn(element) {

   for (i = 0; i < 100; i++) {
      var value = 0 + i;


      element.style.opacity = value;
      element.style.filter = 'alpha(opacity=' + value + ')';
   }
}

function fadeOut(element) {

   for (i = 0; i < 100; i++) {
      var value = 100 - i;

      element.style.opacity = value;
      element.style.filter = 'alpha(opacity=' + value + ')';
      element.innerHTML = "<div class='container' id='container' onmouseover='fadeOut(this)'><img src='./images/myImage.jpg' onload='fadeIn(this.parent)' /></div>";

   }
}

解决方案

Your fadeIn/Out doesn't work right because you haven't done anything to control the rate of change. That will just execute immediately and show/hide the elements.

Try something like this:

function fadeIn(el) {
   var opac = 0;
   var i = setInterval(function() {
     opac += 10;
     if (opac >= 100) {
       clearInterval(i);
       opac = 100;
     }
     el.style.opacity = opac;
     el.style.filter = 'alpha(opacity=' + opac + ')';

   }, 20);
}

That should fade in over 200ms (20 * 100 / 10). Play with the numbers to adjust the speed.

As for mouseover/out, you can just bind the events like anything else.

Generally, attaching JS events like you have, using HTML attributes, is frowned upon. Usually you'd have a helper like this: https://gist.github.com/955642

You want to write your own method that will check which of the main methods, addEventListener or attachEvent your browser supports.

这篇关于onmouseover onmouseout fadeIn fadeOut没有jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！