Question

我正在制作三个框，可以在单击时设置动画并显示文本。单击其中一个时，其他单元向下移动以允许空间显示文本。单击中间时，另外两个向下移动，但单击的也向左移动。

我的问题是，虽然它在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;
 }

Answer 1

问题出在if语句中，我将其从jsfiddle中排除，以简化它。此交互仅用于在桌面上的全屏窗口中进行，因此每个单击事件处理程序内部都是：

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

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

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

jQuery animate（）在Firefox或Internet Explorer中不起作用

1 个答案: