Jquery淡入和淡出效果的变化与firefox (JavaScript)

Jquery fade in and fade out effect changes with firefox (JavaScript)

本文关键字：firefox JavaScript 变化 淡入 淡出 Jquery      更新时间：2023-09-26

我在一个表上使用了Jquery。如果我把鼠标移到一行上，它会改变颜色。下面的Javascript是为IE7制作的，效果在这里非常完美。当我在Firefox中运行此脚本时，文本会随着背景淡出。在Firefox中，这种效果在淡出时显示一个空白(白色)行。他这么做可能是因为整个行都受到了影响。

是否有办法保持文本在任何时候都可见?(文本在a)

$(document).on({
         mouseenter: function(e) {
             $(this).fadeIn('fast', function() {
                $(this).addClass("white");
            });
         },
         mouseleave: function(e) {
             $(this).fadeOut('fast', function() {
                $(this).removeClass("white");
            });
            $(this).fadeIn('fast', function() {
                $(this).addClass("grey");
            });
         }
    }, 'table[id*="tbl_main"] tbody tr[id*="dataCell_"]');

表的一行的Html:

<tr id="ctl00_contentHolder_dataCell_lbl_currencyMisc0" class="grey">
<td align="center"><input type="image" name="ctl00$contentHolder$0-181337" id="ctl00_contentHolder_0-181337" runat="server" src="img/plus.gif" style="border-width:0px;" /></td>
<td title="New Network Hub" align="center">181337</td><td align="center">11337.06</td>
<td align="center"><span id="ctl00_contentHolder_lbl_currencyMisc1">USD</span></td>
<td align="center">6</td><td align="center">31337.36</td><td align="center"><span id="ctl00_contentHolder_lbl_currencyReport1">USD</span></td>
<td align="center">12</td><td align="center">13371.3</td><td align="center">63.82%</td>

您正在尝试fadeIn或fadeOut的tr元素。如果不显示fadeOut之后的内容，Firefox工作得很好，因为它应该被隐藏(使用CSS -> display:none)。这是fadeOut的任务:)-看看API。

如果我理解你的问题，你想改变背景颜色与平滑的效果。如果是，那么JQuery UI .toggleClass(...)就是你正在搜索的。JQuery库也有一个toggleClass(...)方法，但是没有任何效果。它会立即改变类。

我在JSFiddle上创建了一个示例

我想你应该试试这个:

 var state = true;
 $( "#tab tr" ).hover(function() {
    if ( state ) {
       $(this).stop().animate({
        backgroundColor: "#f99"
       }, 500 );
   } else {
      $(this).stop().animate({
        backgroundColor: "#fff"
      }, 500 );
   }
   state = !state;
  });
});

CHECKOUT THE BIN

你需要一个jQuery ui library，如果你想动画的颜色。

相关文章：