Как закрыть div, показать загрузку изображения и открыть другой div в jquery?

У меня есть два div на моей странице с именами div1 и div2 и кнопка. Первоначально div2 будет скрыт. Когда я нажимаю на кнопку, должны произойти три вещи

1.close the div1 with some animation
2.Show a loading image for a particular amt of time
3.Show the div2 with some animation

Как я могу реализовать вышеизложенное с помощью jquery?


animation jquery image-loading
person ksg    schedule 07.02.2014    source источник
comment
Этот вопрос не по теме в Stackoverflow. Stackoverflow не для таких вопросов, как «Пожалуйста, дайте мне код для X». Начните программировать, проведите небольшое исследование, изучите jQuery. Затем, когда вы застрянете где-то в процессе внедрения, мы будем рады помочь вам.   -  person RononDex    schedule 07.02.2014

Ответы (5)


arrow_upward
2
arrow_downward

Попробуйте так

<div>
<div id="div1"></div>
<div id="loading-image" style="display:none;"><img src="loader.gif"/></div>
<div id="div2" style="display:none;"></div>
</div>

$("#button").click(function(){

$("#div1").slideUp();
$("#loading-image").show();

setTimeout(function() {
$("#loading-image").hide();
           $("#div2").slideDown();

        }, 500);

});
person Kalai    schedule 07.02.2014

arrow_upward
1
arrow_downward

Хорошо, проверьте это.

ДЕМО http://jsfiddle.net/D9Nw6/1/

JQUERY

$(document).ready(function () {
    $('input').on('click', function () {
        $('#loading').show();
        $('#one').slideUp(1000);
        $('#two').slideDown( "1000", function() {
            // Animation complete.
            $('#loading').hide();
        });        
    });
});

HTML

<input type="button" value="Click Me" />
<div id="one">Blue</div>
<div id="two">Red</div>
<div id="loading"></div>
person yeyene    schedule 07.02.2014

arrow_upward
0
arrow_downward

Ваш код должен быть примерно таким:

CSS:

#div2,, #my-img {
    display:none;
}

jQuery:

$('#my-button').on('click', function () {
    $('#div1').fadeOut();
    $('#my-img').fadeIn();
    setTimeout(function(){ 
        $('#div2').fadeIn(); 
    }, 2000 );
}

Что это в основном делает:

  • Вы нажимаете на кнопку
  • Первый div исчезает и появляется изображение
  • Через 2 секунды (2000 миллисекунд) изображение исчезает и появляется второй div.
person bbahov    schedule 07.02.2014

arrow_upward
0
arrow_downward

Если я правильно понял ваш вопрос, этот код поможет вам: http://jsfiddle.net/dehisok/c6XCx/

$('#div1').fadeOut(500, function() {        
    $('body').append('<img src="http://ppt4web.ru/assets/2c736062/img/loading.gif" class="loading" width="100" />');

    $('#div2').fadeIn(1000, function() {
        $('.loading').remove();
    });
});
person Danny Chernyavsky    schedule 07.02.2014

arrow_upward
-1
arrow_downward

закройте div1 с помощью анимации

$('#div1').fadeOut('slow');

для получения дополнительной помощи fadeOut

Показывать загружаемое изображение в течение определенного промежутка времени

$("#loadingDiv").show().delay(5000).fadeOut('slow');

Покажите div2 с анимацией

$('#div1').fadeIn('slow');

для получения дополнительной помощи fadeIn

person Saeedses    schedule 07.02.2014