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

我正在研究有三個框單擊時顯示動畫和文本。點擊其中一個時，其他人會下移以允許空間顯示文本。當中間被點擊時，另外兩個向下移動，但點擊一個也移動到左側。jQuery animate（）在Firefox或Internet Explorer中不起作用

我的問題是，雖然它在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; 
}

來源

2013-05-14 Mike S.

你有一個功能，但我沒有看到任何調用它。 – j08691 2013-05-14 15:56:57

你能創建一個http://jsfiddle.net嗎？ – 2013-05-14 16:09:18

函數selectBox（$ box）通過單擊每個框附加的事件來調用。例如，當單擊Web框時，它會調用selectBox（'web'）;我知道這些點擊事件是可行的，因爲無論如何，文本總是正確顯示，並且僅在selectBox（）內調用該函數。我將致力於創建一個jsfiddle。 – 2013-05-14 17:10:34

問題出在我爲了簡化而忽略jsfiddle的if語句。這種相互作用只是爲了發生在桌面上的全屏窗口，因此內部的每個點擊事件處理程序是：

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

這不起作用，因爲Firefox和IE返回「未定義」該屬性。

我試着將它改爲screen.width，但這似乎返回我的顯示器的寬度，並且window.width給出了與document.width相同的結果。解決方案是使用實際的jQuery $（window）.width（），它爲所有瀏覽器返回相同的結果。

來源

2013-05-15 13:16:47

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

回答

相關問題