水平手風琴不適用於Safari或Chrome

Question

我確定我在這裏錯過了一些明顯的東西，因爲我對jQuery相對陌生。我正在嘗試構建水平手風琴。到目前爲止，它在FF中正常工作，但在Safari或Chrome中無法正常工作。

在Safari和Chrome中，.content div顯示在各自的手風琴窗格下方，而不是保留其位置並顯示寬度動畫。

在此先感謝您的幫助。

下面是一個例子的鏈接：http://www.billjordandesign.com/jQuery_tests/horizontal_accordion.html

這裏是我的jQuery：

<script type="text/javascript"> 
$(document).ready(function() { 

$('.content').hide(); 
$('.content:first').show(); 


$('a').click(function(){ 

$('.content').hide(); 
$(this).siblings('.content').animate({'width':'toggle'}, 'slow', 'easeOutBack') 
    }); 

}); 

</script> 

...這裏是我的HTML：

<div id="navigation"> 

<ul> 

<li><a href="#"><span><div class="pane"><div class="verticaltext">Home</div></div></span></a><div class="content">1</div></li> 


<li><a href="#"><span> 
<div class="pane"><div class="verticaltext">About</div></div></span></a><div class="content">2</div></li> 


<li><a href="#"><span> 
<div class="pane"><div class="verticaltext">Overview</div></div></span></a><div class="content">3</div></li> 


<li><a href="#"><span> 
<div class="pane"><div class="verticaltext">Services</div></div></span></a><div class="content">4</div></li> 


<li><a href="#"><span> 
<div class="pane"><div class="verticaltext">Contact</div></div></span></a><div class="content">5</div></li> 

</ul> 

</div> 

...這裏是我的CSS：

#navigation{ 
position:absolute; 
display:block; 
top:100px; 
width:1000px; 
height:400px; 
font-family:Arial, Helvetica, sans-serif; 
font-size:16px; 
color:#333; 

} 

#navigation a{ 
font-family:Arial, Helvetica, sans-serif; 
font-size:16px; 
font-weight:bold; 
color:#FFF; 

} 

#navigation a:hover{ 
font-family:Arial, Helvetica, sans-serif; 
font-size:16px; 
font-weight:bold; 
color:#FFF; 


} 


#navigation ul{ 
margin:0; 
padding:0; 
height:400px; 
list-style-type:none; 
list-style-image:none; 
} 

#navigation li{ 
display:inline; 
border-right:thin #FFF solid; 
float:left; 

} 

.pane{ 
position:relative; 
display:block; 
height:400px; 
width:50px; 
background-color:#09F; 
float:left; 
} 

.verticaltext { 
position:absolute; 
display:block; 
width:50px; 
bottom:50px; 
font-family:Arial, Helvetica, sans-serif; 
font-size:24px; 
font-weight:bold; 
color:#FFF; 
text-align:center; 
letter-spacing:-1px; 
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
} 

.content{ 
position:relative; 
display:block; 
width:400px; 
height:400px; 
left:10px; 
font-family:Arial, Helvetica, sans-serif; 
font-size:14px; 
color:#333; 
float:left; 
background-color:#FFF 
} 

Answer 1

jquery看起來很紮實，我做了一些html和css調整。分享這類事情它的工作對我來說在Chrome

http://jsfiddle.net/generalhenry/D3Hm5/1/