0

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

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

1 回答 1

0

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

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

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

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

于 2013-05-15T13:16:47.077 回答