css3、jq、js三种方法实现逐渐消失

最新推荐文章于 2024-02-21 17:15:24 发布

置顶伏见伊奈里

最新推荐文章于 2024-02-21 17:15:24 发布

阅读量1.9w

点赞数 5

本文链接：https://blog.csdn.net/qq_35313994/article/details/78609306

版权

html：

<div class="hideSlow">div会逐渐消失</div>

css3：

.hideSlow{
    background: #a40808;
      color: #fff;
      animation: hidetip 5s 1;
      animation-fill-mode: forwards;
      -webkit-animation: showtip 5s 1;
      -webkit-animation-fill-mode: forwards;
}
@keyframes hidetip {
      from {
        opcity: 1;
      }
      to {
        opacity: 0;
      }
    }
    @-webkit-keyframes hidetip {
      from {
        opcity: 1;
      }
      to {
        opacity: 0;
      }
    }

jq：

$(".hideSlow").fadeOut(3000);
$(".hideSlow").fadeTo("3000",0.7);

jQuery fadeOut() 方法用于淡出可见元素。
语法：
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法：
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

JS

<p id="hideSlow">点击按钮，3 秒后测试文字会消失</p>
  <button οnclick="myFunction()">点我</button>

setTimeout()方法：

setTimeout()方法用于在指定的毫秒数后调用函数活计算表达式

提示： 1000 毫秒= 1 秒。

提示：如果你只想重复执行可以使用 setInterval() 方法。

提示：使用 clearTimeout() 方法来阻止函数的执行。

var test = document.getElementById("hideSlow");
      var count = (function() {
      var timer;
      var i = 0;
          function change(tar) {
              i++;
              console.log(i);
              console.log(test.style.opacity);
              var num = 1-i/100;
              test.style.opacity=num;
              if (i === tar) {
                  clearTimeout(timer);
                  return false;
              }
              timer = setTimeout(function() {
                  change(tar)
              }, 100)


          }
          return change;
      })()


      count(100)