2015-12-10 2 views
1

Когда пользователь нажимает на «Редактировать», я хочу скрыть ссылку «Редактировать», затем скрыть содержимое выше и показать скрытый div.jQuery: оживить, скрыть и показать содержимое

Я смог это сделать, но как я могу вернуть этот процесс, если пользователь нажмет кнопку «Отмена»?

jsFiddle

$('.js-edit').click(function(){ 

    // Hide 'Edit link' 
    $(this).fadeOut(200); 

    // Push down 'other' div 
    $('.other').animate({ 
    'marginTop' : "+=400px" //moves down 
    }); 

    // Hide content 
    $('.hide-content').delay(200).fadeOut(200); 

    // Show hidden content 
    $('.show-content').delay(400).fadeIn(200); 
}); 

ответ

2

Вы можете вернуть то, что все, что вы сделали. Может быть, это? Улучшение с помощью метода A. Woff «s:

$(".js-cancel").click(function() { 
    if ($('.other,.hide-content, .show-content').is(':animated')) return; 
    $('.js-edit').fadeIn(); 
    $('.other').animate({ 
    'marginTop': "-=400px" //moves up 
    }); 
    // Show content 
    $('.hide-content').delay(200).fadeIn(200); 

    // Hide shown content 
    $('.show-content').delay(400).fadeOut(200); 
}); 

Fiddle: http://jsfiddle.net/dafckouL/1/

+0

Щелкнув несколько раз быстрее на каждой кнопке вызывает странное поведение. Это будет исправлено: 'if ($ ('. Other, .hide-content, .show-content'). Is (': animated')) return;' http://jsfiddle.net/dafckouL/1/ –

+1

@ A.Wolff Добавлено и обновлено. С учетом соответствующих кредитов ... ': D' –

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