jQuery animate() 在 Firefox 或 Internet Explorer 中不起作用答案

【问题标题】：jQuery animate() doesn't work in Firefox or Internet ExplorerjQuery animate() 在 Firefox 或 Internet Explorer 中不起作用
【发布时间】：2013-05-14 15:51:28
【问题描述】：

我正在努力让三个框在单击时动画并显示文本。单击一个时，其他的会向下移动以留出空间来显示文本。单击中间时，其他两个向下移动，但单击的一个也向左侧移动。

我的问题是，虽然它在 Webkit 浏览器中运行良好，但在 Firefox 和 Internet Explorer 中，当文本出现时，这些框不会向下移动并移开。似乎我做了一些取决于 Webkit 工作方式的事情，但据我所知，我的代码非常标准。

编辑：这是一个 JSFiddle http://jsfiddle.net/CaptainSpectacular/zLnDm/10/，但由于某种原因，它不会重现我在我的网站上实际遇到的问题。

这是我的 jQuery 函数：

function selectBox($box) {

    switch($box) {
    case 'brand':
            $('.brand-identity').animate({top : 0}, 300)
                .animate({left : 40}, 300)
            $('.web').animate({top : 270, left : 340}, 300);
            $('.print-design').animate({top : 270, left : 640}, 300);
            toggleText('brand');
            break;
        case 'web':
            $('.web').animate({top : '0px'}, 300).animate({left : '40px'}, 300);
            $('.brand-identity').animate({top : '270px'}, 300)
                .animate({left : '40px'}, 300);
            $('.print-design').animate({top : '270px' }, 300)
                .animate({left : '640px'}, 300);
            toggleText('web');
            break;
        case 'print':
            $('.web').animate({left : '340px'}, 300)
                .animate({top : '270px'}, 300);
            $('.brand-identity').animate({top :'270px'}, 300)
                .animate({left : '40px'}, 300);
            $('.print-design').animate({top : '0px'}, 300)
                .animate({left : '640px'}, 300);
            toggleText('print');
            break;
    }
}

（toggleText 只是根据输入字符串决定显示/隐藏哪个文本 div）

以及它应该影响的html：

<div class="services-box-container">
    <div class="services-box brand-identity">
        <img class="brand-color"src="/images/services/brand-icon-color.png">
        <p>brand<br/>identity</p>
    </div>

    <div class="brand-text">
        <p>brand text</p>
    </div>
</div>

<div class="services-box-container">
    <div class="services-box web">
        <img class="web-color"src="/images/services/web-icon-color.png">
        <p>web</p>
    </div>

<div class="web-text">
    <p>Web Text</p>
</div>                      
</div>

<div class="services-box-container">
    <div class="services-box print-design">
        <img class="print-color"src="/images/services/print-icon-color.png">
        <p>print<br/>design</p>
    </div>

    <div class="print-text">
        <p>print text</p>                   
    </div>                      
</div>

最后是这些盒子的 css：

.services-box {
    top: 0;
    position: absolute;
    width: 230px;
    height: 230px;
}
.brand-identity {
    top: 0;
    left: 40px;
}
.web {
    top: 0;
    left: 340px;
}
.print-design {
    top: 0;
    left: 640px;
 }

【问题讨论】：

你有一个函数，但我没有看到任何调用它的函数。
你能创建一个jsfiddle.net吗？
函数 selectBox($box) 由附加到每个框的点击事件调用。例如，当单击 Web 框时，它会调用 selectBox('web');我知道这些点击事件是有效的，因为无论如何，文本总是正确显示，并且仅在 selectBox() 中调用该函数。我将致力于创建一个 jsfiddle。
我添加了 jsfiddle (jsfiddle.net/CaptainSpectacular/zLnDm/10) 但它不会重现我的问题。这让我相信这可能是围绕那段代码的包含 div 的问题。
@CaptainSpectacular 您的 Fiddle 演示在 IE 和 FF 中运行良好

标签： jquery firefox webkit jquery-animate css-position

【解决方案1】：

问题在于我为了简化它而在 jsfiddle 中省略了一个 if 语句。这种交互只意味着在桌面上的全屏窗口中进行，因此在每个点击事件处理程序内部是：

if(document.width > 960){
    //Event handling
}

这不起作用，因为 Firefox 和 IE 为该属性返回“未定义”。

我尝试将其更改为 screen.width，但这似乎返回了我的显示器的宽度，并且 window.width 给出了与 document.width 相同的结果。解决方案是使用实际的 jQuery $(window).width()，它为所有浏览器返回相同的结果。

【讨论】：