Question

HTML

<div id="notifyProductName">

Angualar JS

<a href="" ng-click="cart.addItem(product.name,product.price, 1);cart.ShowItem(product.name)">

的JavaScript

cart.prototype.ShowItem = function (productName)
{

  document.getElementById("notifyProductName").innerHTML = productName";
  document.getElementById("notifyProductName").fadeOut(400);
 }

我想在html消息框中显示productName，然后在几秒钟后淡出消息框。

Answer 1

设置3秒setTimeout()功能，并在transition上使用opacity的CSS类进行淡入淡出。

cart.prototype.ShowItem = function (productName)
{
  var el = document.getElementById("notifyProductName");
  el.innerHTML = productName;
  el.classList.remove('fade');
  el.classList.add('show');
  var timeout = setTimeout(function() {
    el.classList.add('fade');
  }, 3000);
}

.notifyProductName {
  opacity: 0;
}

.show {
  opacity: 1;
}

.fade {
  opacity: 0;
  transition: opacity .5s;
}

<div id="notifyProductName" class="notifyProductName"></div>

Javascript函数到FadeIn和FadeOut html项目 - 工作解决方案

1 个答案: