jQuery、IE 和动画

Posted 2023-05-08

【中文标题】jQuery、IE 和动画

【英文标题】：jQuery, IE & Animate

【发布时间】：2011-01-10 03:14:56

【问题描述】：

我一直在开发一个在 Chrome 和 Firefox 中使用 jQuery 的网站。现在已经到了在 IE 中打开它并看到 WTF IE 对网站所做的阶段。

单击页面上某个窗口中的最小化按钮（左上角）时出现问题。该项目应该动画到一个角落并改变不透明度，但它只是改变不透明度并且不会移动。这是下面包含的 animate 函数的一部分，所以它是 IE 中的 animate 问题吗？

IE 只是在调试器中给出错误“无效的参数 - 第 142 行 - jquery.js”（实际的 jQuery 源文件）。

网站在http://pegfm.pezcuckow.com/，JS在http://pegfm.pezcuckow.com/js/main.js

IE 所指的行 (142) 是 - 根据 IE8 中的调试器

a.elem.style[a.prop]=(a.prop==="width"||a.prop==="height"?Math.max(0,a.now):a.now)+a.unit;

此函数是在按下最小化按钮时调用的函数（在 onready 内）

/* Minimize Windows */
    function windowm(id) 
        var left, right, top, bottom;
        if(id == "chat")  
            shown = chat;
            if(chat==1)  chat = 3;  else  chat = 1; 
         else if(id == "rplayed")  
            shown = rplayed;
            if(rplayed==1)  rplayed = 3;  else  rplayed = 1; 
         else if(id == "info")  
            shown = info;
            if(info==1)  info = 3;  else  info = 1; 
         else if(id == "player")  
            shown = player;
            if(player==1)  player = 3;  else  player = 1; 
        

        wid = "#" + id;
        bid = "#b_" + id;
        if(shown==3)  dir = "+"; opacity = 1;  else  dir = "-"; opacity = 0.1; 
        amt = '=70%';
        if(id == "chat")  
            right = dir + amt;
            top = dir + amt;
         else if(id == "rplayed")  
            left = dir + amt;
            top = dir + amt;
         else if(id == "info")  
            right = dir + amt;
            bottom = dir + amt;
         else if(id == "player")  
            left = dir + amt;
            bottom = dir + amt;
        
        $(wid).animate(
            opacity: opacity,
            left: left,
            top: top,
            bottom: bottom,
            right: right
        , 200);
        $(bid).fadeToggle("fast");
    

    $("#info .minus").click(function()windowm('info'));
    $("#chat .minus").click(function()windowm('chat'));
    $("#rplayed .minus").click(function()windowm('rplayed'));
    $("#player .minus").click(function()windowm('player'));

两个窗口的 CSS 如下所示

.window 
    position: absolute;
    width: 394px;
    height: 262px;
    background-image:url(../images/bg_window.png);
    z-index:3;
    display: none;

#rplayed 
    left: 50%;
    top: 50%;
    margin-left: -197px;
    margin-top: -131px;
    z-index: 3;
    overflow:hidden;

#info 
    bottom: 50%;
    right: 50%; 
    margin-right: -197px;
    margin-bottom: -131px;
    z-index: 2; 

【参考方案1】：

尝试将该行更改为：

a.elem.style[a.prop]=(a.prop==="width"||a.prop==="height"?Math.max(0,a.now||0):a.now)+a.unit;

【讨论】：

这对我没有帮助 - 它在运行 IE8 时导致了同样的错误。我在jquery-1.5.1.min.js and IE8 对此进行了进一步研究，发现 [jQuery bug #4571] (bugs.jquery.com/ticket/4571) 已因无法修复而关闭。主要收获是您不应该在 IE 中将填充或边距设置为负数

【参考方案2】：

改为：

a.elem.style[a.prop]=(a.prop==="width"||a.prop==="height"?Math.max(0,a.now=0):a.now=0)+a.unit;

【讨论】：

感谢尼克·克拉弗。对于这种荒谬的问题，这是一个非常简单的解决方案。