addEventListener 和 FadeOut 不适用于 TR答案

【问题标题】：addEventListener and FadeOut not working with TRaddEventListener 和 FadeOut 不适用于 TR
【发布时间】：2014-08-20 17:13:34
【问题描述】：

好的，我已经看了又看并尝试了各种其他可行的解决方案，但仍然卡住了，我要扔东西了。

我正在尝试使用以下方法使 TR 淡出，然后在单击所述 TR 单元格内的链接后隐藏：

1 - jQuerys fadeOut/fadeTo（我都试过了）

  function delTrans(id){
    var name = "chkSelect" + id;
    var chk = document.getElementById(name);
    var tableRow = $(chk).closest('tr');
    tableRow.addClass("transition");
    $(tableRow).find("td").fadeTo('slow',0,function(){
      alert("finished");
    }); 
  }

这似乎并没有多大作用，没有产生js错误或警告，屏幕上显示的输出也没有变化。

2 - 添加事件监听器：

  function delTrans(id){
    var name = "chkSelect" + id;
    var chk = document.getElementById(name);
    element = $(chk).closest("tr");
    element.addClass("transition");
    element.addEventListener("transitionend", 
      function () {
        element.addClass("hidden"); 
      },
      true
    );

这只会成功生成一个JS错误：Type Error。 element.addEventListener 不是函数。我已经直接在 chk 对象上尝试了 addEventListener ，这很好，这意味着 addEventListener 不会在元素 'tr' 上工作。

欢迎提出任何建议

【问题讨论】：

addEventListener 将应用于 DOM 元素，但您的 element 是一个 jQuery 对象。 element[0] 将是底层节点。看到这里使用.on()：How do I use transitionend in jQuery?
@AlexK。谢谢亚历克斯，这让我通过使用 element.on("transitionend", function()....);但是现在它的行为与通过 fadeOut() 方法非常相似 - 没有任何反应 - 没有添加“隐藏”类，也没有发生任何褪色:(
还有其他建议吗？
为什么需要transitionend？有一个内置的完成回调来淡入淡出：jsfiddle.net/alexk/fBzMB
我正在尝试使用 jquery fadeOut，或者使用需要 transitionend 的 css 过渡。我现在实际上已经解决了这个问题，问题在于我的 css 中的转换语句的位置。感谢您的帮助

标签： jquery fadeout addeventlistener

【解决方案1】：

已解决。问题既不是 fadeOout() 也不是 addEventListener。问题出在 CSS 上。无法发布，因为我不再拥有修复问题之前的副本

【讨论】：