2012-05-31 3 views
0

У меня есть слайдер боковой панели, который отлично работает в 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> 

Большое спасибо заранее за помощь.

+1

JSFiddle действительно будет полезен. Есть ли причина, по которой вы не используете функциональность Toggle из любопытства? –

ответ

0

Спасибо за просмотр. Похоже, что предложение MobyD (в комментариях) содержало ключ, который должен был использовать toggle() или, по крайней мере, show() в div, который должен быть показан, перед анимацией его ширины. Цените помощь.

Смежные вопросы