Блог

Главная - Вопросы по программированию - Скользящая анимация в шаблон загрузки

Скользящая анимация в шаблон загрузки

#jquery #html #css

#jquery #HTML #css

Вопрос:

HTML:

 <button id='btn'>Click</button>

Main.html:

 <div id="main"><p>Hai I am Main..</p></div>

Sub.html

 <div id="sub"><p>Hai I am sub..</p></div>

JS:

 $(document).on("click", "btn", function(e) {
            e.preventDefault();

            var toggler = $('#main'),
                wrapper = toggler.find('#sub');

            if(wrapper.length==0){
                toggler.load("sub.html");
            }
            else{
                toggler.load("main.html");
            }

        });

Загрузка шаблона работает нормально, пытаясь добавить событие скольжения в шаблон при загрузке. Я пытался $toggler.load("sub.html").slideUp()

Шаблон должен загружаться с анимацией slideup при повторном нажатии кнопки при нажатии кнопки он должен скользить вниз. Как я могу это сделать?

Комментарии:

1. Ваш селектор отсутствует # там, где он должен быть #btn , это ваш фактический код? Или опечатка?

2. попробуйте, как toggler.load(«main.html «).slideToggle();

Ответ №1:

 $(document).on("click", "#btn", function(e) {
            e.preventDefault();
            var toggler = $('#main'),
                wrapper = toggler.find('#sub');
            if(wrapper.length==0){
                toggler.load("sub.html").slideToggle();
            }
            else{
                toggler.load("main.html").slideToggle();
            }
});

ДЕМОНСТРАЦИЯ:

http://jsfiddle.net/y9avm/

Метки: