Отображение невидимого div после jquery animate - PullRequest
Новая
       21

Отображение невидимого div после jquery animate

2 голосов
/ 14 ноября 2009

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

$('#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');
 });

});

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

Ответы [ 2 ]

5 голосов
/ 14 ноября 2009

Вам нужно будет реализовать 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 голосов
/ 14 ноября 2009

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

...