2009-11-14 2 views
2

Итак, я пытаюсь выяснить, как показать невидимый div после анимации на jquery. Вот код, чтобы показать DIV:Показывать невидимый div после jquery animate

$('#box_green') 
    .css({ 
     visibility: "visible", 
     opacity: 0 
    }) 
    .fadeIn('slow') 
; 

CSS-код, который также делает DIV невидимое:

div#box_green{ 
    background-image:url(../images/bg_stripe_green.png); 
    background-repeat:repeat; 
    width: 478px; 
    height:300px; 
    position:absolute; 
    top:249px; 
    z-index:20; 
    visibility:hidden; 
} 

и анимации на клик:

$(document).ready(function(){ 

$("#menu_h, #menu_p, #menu_q, #menu_b, #menu_c").one('click', function(){ 
    $("#menu_h").animate({"left": "+=419px"}, "slow"); 
    $("#menu_p").animate({"left": "+=313px"}, "slow"); 
    $("#menu_q").animate({"left": "+=210px"}, "slow"); 
    $("#menu_b").animate({"left": "+=104px"}, "slow"); 
    $("#menu_c").animate({"left": "+=0px"}, "slow"); 
    $("#menu_h, #menu_p, #menu_q, #menu_b, #menu_c").unbind('click'); 
}); 

}); 

, как я могу сделать это, что box_green div показывает после завершения анимации #menu_h? и позволяет сказать, что у меня есть также скрытый div #box_yellow, как я могу сделать его видимым (с тем же эффектом, что и box_green div), после того, как снова исчезнет box_green (позволяя ему снова быть невидимым). На самом деле у меня есть 5 div (box_green и box_yellow - 2 из них), которые должны иметь, что «очередь в настоящее время отображается div off и show div clicked».

+0

Вам не нужно отвязывать, если вы используете функцию «один». Кроме того, ваш вопрос ужасно запутанный. Почему вы снова скрываете '# box_green'? –

+0

подумайте об этом как об изображении с информацией о предмете X, когда я нажимаю на X в меню, которое должно появиться это изображение (с эффектом jquery), оно остается скрытым, потому что меню занимает всю область содержимого, пока кто-то не нажимает на пункт меню X, затем все меню скользит вправо, оставляя достаточно места для изображения (box_green content), чтобы отобразиться. – Bruno

+0

Идея состоит в том, чтобы сохранить не одну, а пять скрытых div, каждый из которых является содержимым меню, и они должны отображаться только при нажатии на кнопку меню – Bruno

ответ

5

Вам необходимо будет реализовать callback.

От http://docs.jquery.com/Effects/animate#examples

Пример использования обратного вызова функции. Первый аргумент является массивом свойств CSS, второй указует, что анимация должна взять 1000 миллисекунд, чтобы закончить, третьи страны типа ослабления и четвертого аргументом является анонимной функцией обратного вызова.

$("p").animate({ 
     height:200, width:400, opacity: .5 
    }, 1000, "linear", function(){alert("all done");}); 

Заменить function(){alert("all done");} с вашей собственной функции к сделал что-то появляются, исчезают, ничего ...: P

0

Вы также можете использовать show и hide функции, а не играть с CSS из элемент или даже toggle, если вы показываете/скрываете один и тот же элемент.

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