Chrome浏览器和Safari浏览器JQuery错误与动画和显示/隐藏

我有一个工作正常工作在FF和IE的侧边栏滑块。点击div后，侧边栏滑出;再次单击并滑动回来。然而，在Chrome和Safari中，它在第一次运行良好（动画宽度缩小和动画宽度缩回），但是第二次，应该滑出的div部分出现在div下方以进行单击。Chrome浏览器和Safari浏览器JQuery错误与动画和显示/隐藏

我已经创建了一个非常简单的问题示例。这里是JavaScript：

var slider_state = 'hidden'; 

function reveal_slider() 
{ 
$('#reveal_div').animate({width:500}); 
slider_state = 'shown'; 
} 

function hide_slider() 
{ 
slider_state = 'hidden'; 
$('#reveal_div').animate({width:0}, function(){ 
    $('#reveal_div').hide(); 
    }); 
} 

$(document).ready(function(){ 
$('#slider_trigger').click(function(){ 
    if (slider_state == 'hidden') 
     { 
     reveal_slider(); 
     } 
     else 
     { 
     hide_slider(); 
     } 
    }); 
});

和CSS：

#slider_container 
     { 
     position:fixed; 
     top:350px; 
     right:0px; 
     z-index:21; 
     } 
    #slider_trigger 
     { 
     float:left; 
     width:35px; 
     height:100px; 
     background-color:yellow; 
     } 
    #reveal_div 
     { 
     float:left; 
     height:200px; 
     display:none; 
     background-color:blue; 
     border:3px black solid; 
     }

和HTML：

<body> 
<div id='slider_container'> 
    <div id='slider_trigger'> 
     Click 
    </div> 
    <div id='reveal_div' > 
    </div> 
</div> 
</body>

在此先感谢您的帮助很大。

来源

2012-05-31 Jeff 131313

JSFiddle实际上会有所帮助。出于好奇，是否有理由不使用切换功能？ –

感谢您的收看。看起来MobyD的建议（在评论中）保留了关键点，在对其宽度进行动画处理之前，使用toggle（）或至少show（）显示div。感谢帮助。

来源

2012-05-31 18:43:30

Chrome浏览器和Safari浏览器JQuery错误与动画和显示/隐藏

回答

相关问题