Question

我在桌子上使用了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>

Answer 1

您正在尝试fadeIn或fadeOut tr元素。 Firefox如果没有在fadeOut之后显示内容，则效果很好，因为它应该被隐藏（使用CSS - ＆gt; display:none）。这是fadeOut :)的使命 - have a look at the API。

如果我理解您的问题，您希望以平滑的效果更改背景颜色。如果是，那么JQuery UI .toggleClass(...)就是您要搜索的内容。 JQuery库还有一个toggleClass(...)方法，但没有任何影响。它会立即改变班级。

我在JSFiddle上创建了一个示例。

Answer 2

我认为你应该尝试这个：

 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。

Jquery使用firefox（JavaScript）淡入并淡出效果更改

2 个答案:

CHECKOUT THE BIN