IE中的jQuery fadeIn,fadeOut效果

时间:2022-08-27 12:41:20

The below fadeIn, fadeOut effect works fine in Firefox 3.0 but it doesn't work in IE 7 ... Whay is that and what's the trick? The idea is of course to get a "blink" effect and attract the attention of the user to a specific row in a table.

下面的fadeIn,fadeOut效果在Firefox 3.0中运行良好,但它在IE 7中不起作用...哇,那是什么诀窍?这个想法当然是为了获得“眨眼”效果并吸引用户注意到表格中的特定行。

function highLightErrorsAndWarnings() {
            $(".status-error").fadeIn(100).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300);
            $(".status-warning").fadeIn(100).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300);
        }

Update: Found the stupid problem ... ".status-error" points to a tr-element. It's possible to the set the background-color and fade it on a tr in Firefox but not in IE. Changing the "CSS pointer" to ".status-error td" made it point to the td below the tr and everything worked in all browsers.

更新:发现愚蠢的问题......“。status-error”指向tr元素。可以设置背景颜色并在Firefox中的tr上淡化它,但不能在IE中。将“CSS指针”更改为“.status-error td”使其指向tr下方的td,并且所有浏览器中都可以使用。

3 个解决方案

#1


5  

Weird.. couldn't tell you why you're getting that problem, but maybe try the pulsate effect plugin? http://docs.jquery.com/UI/Effects/Pulsate

奇怪..不能告诉你为什么你会遇到这个问题,但也许尝试脉动效应插件? http://docs.jquery.com/UI/Effects/Pulsate

#2


1  

I have a similar issue but I can't select the td's instead for various reasons.

我有类似的问题,但由于各种原因我无法选择td。

If you are also affected you might try using show instead of fadeIn. Since I'm using the similarly broken fadeTo this doesn't help me either :(

如果您也受到影响,可以尝试使用show而不是fadeIn。因为我使用同样破碎的淡入淡出这对我也没有帮助:(

There is a jQuery bug open here - http://dev.jquery.com/ticket/5451

这里有一个jQuery错误 - http://dev.jquery.com/ticket/5451

If you are affected please comment on the ticket.

如果您受到影响,请对机票进行评论。

#3


1  

Well, i have experimented with various ways to address this issue. The down and dirty approach that I use is to detect background and foreground color on text and just animate the div/span/etc with color change.

好吧,我已经尝试了各种方法来解决这个问题。我使用的向下和脏的方法是检测文本上的背景和前景色,并仅使用颜色变化为div / span / etc设置动画。

This snippet will "pulsate" the text once (you can create a function that does it more times by :

此片段将“脉动”文本一次(您可以创建一个函数,通过以下方式执行更多次:

$.fn.crossBrowserPulsate = function() {
    var startColor = $(this).css("background-color");
    var endColor = $(this).css("color");

    $(this).animate({color:startColor},500,
     function() {
      $(this).animate({color:endColor},500,
       ...
      )}
    );
}

#1


5  

Weird.. couldn't tell you why you're getting that problem, but maybe try the pulsate effect plugin? http://docs.jquery.com/UI/Effects/Pulsate

奇怪..不能告诉你为什么你会遇到这个问题,但也许尝试脉动效应插件? http://docs.jquery.com/UI/Effects/Pulsate

#2


1  

I have a similar issue but I can't select the td's instead for various reasons.

我有类似的问题,但由于各种原因我无法选择td。

If you are also affected you might try using show instead of fadeIn. Since I'm using the similarly broken fadeTo this doesn't help me either :(

如果您也受到影响,可以尝试使用show而不是fadeIn。因为我使用同样破碎的淡入淡出这对我也没有帮助:(

There is a jQuery bug open here - http://dev.jquery.com/ticket/5451

这里有一个jQuery错误 - http://dev.jquery.com/ticket/5451

If you are affected please comment on the ticket.

如果您受到影响,请对机票进行评论。

#3


1  

Well, i have experimented with various ways to address this issue. The down and dirty approach that I use is to detect background and foreground color on text and just animate the div/span/etc with color change.

好吧,我已经尝试了各种方法来解决这个问题。我使用的向下和脏的方法是检测文本上的背景和前景色,并仅使用颜色变化为div / span / etc设置动画。

This snippet will "pulsate" the text once (you can create a function that does it more times by :

此片段将“脉动”文本一次(您可以创建一个函数,通过以下方式执行更多次:

$.fn.crossBrowserPulsate = function() {
    var startColor = $(this).css("background-color");
    var endColor = $(this).css("color");

    $(this).animate({color:startColor},500,
     function() {
      $(this).animate({color:endColor},500,
       ...
      )}
    );
}