Блог

jQuery:

         $(document).ready(function(){
        $('.menuElements').hover(
            function(){             
                $(this).addClass('animated bounce');
            },
            function(){
                $(this).removeClass('animated bounce');
        });

        //trying to create delay here
        $('.menuElements').click(
            function(){
                $(this).addClass('slideOutUp').delay(1000);
            }
        )
    });
  

HTML:

 <div id='wrapper'>
    <div class='container-fluid col-xs-10 col-xs-offset-1 menuContainer'>
        <div class='row-fluid' style='height:100%'>
            <a href='#'>
            <div id='home' class='container col-xs-3 menuElements' style='background-color: #C22326'>
                <img class='myIcons center-block vertical-align' src='images/home.png'>
            </div>
            </a>
            <a href='#'>
            <div id='projects' class='container col-xs-3 menuElements' style='background-color: #F37338'>
                <img class='myIcons center-block vertical-align' src='images/projects.png'>
            </div>
            </a>
            <a href='#'>
            <div id='aboutMe' class='container col-xs-3 menuElements' style='background-color: #FDB632'>
                <img class='myIcons center-block vertical-align' src='images/aboutMe.png'>
            </div>
            </a>
            <a href='#'>
            <div id='contactMe' class='container col-xs-3 menuElements' style='background-color: #027878'>
                <img class='myIcons center-block vertical-align' src='images/contactMe.png'>
            </div>
            </a>
        </div>
    </div>
</div>
  

Моя страница выглядит как четыре столбца, и когда я нажимаю на столбец, он скользит вверх и загружает следующую страницу (для которой мне все еще нужно настроить href). Что я пытаюсь сделать, так это сдвинуть столбец вверх по щелчку и завершить анимацию перед загрузкой новой страницы.

Я довольно новичок в jQuery и пытаюсь научиться сам, поэтому, если вы знаете какие-нибудь хорошие ресурсы, кроме http://api.jquery.com /, я могу использовать это, было бы здорово!

Спасибо, ребята.

Вы можете установить задержку.

Либо установите задержку в самой анимации:

$(".menuElements").addClass("slideOutUp").delay(HOW_LONG);

Или вы могли бы установить тайм-аут перед переходом к следующему действию с помощью JS:

setTimeout(function(){ $(".menuElements").addClass("slideOutUp") }, HOW_LONG);

$(«.menuElements»).addClass(«slideOutUp»).задержка (1000);

Вы можете использовать тайм-аут для задержки анимации. Например

 window.setTimeout(function(){

$(".menuElements").addClass('slideOutUp');

}, 1000);