3
\$\begingroup\$

I have used animate.css and jQuery as external libs. Is there a better way of doing what I have done with jQuery?

DEMO

$(document).ready(function () {

    $('#test li').on('click', function () {

        var className = $(this).attr('class');
        $('#test2 > li').each(function () {

            var prodName = $(this).data('prod');


            if (prodName == className) {

                $('#test2 > li').removeClass('bounceInRight').addClass('bounceOutRight');
                $this = $(this);
                setTimeout(function () {
                    console.log(this);
                    $('#test2 > li').addClass('hide')
                    $this.removeClass('hide bounceOutRight').addClass('bounceInRight');
                }, 400);


            }
        });
    })
});
ul#test > li {
    display: inline-block;
    padding: 10px;
    cursor: pointer;
}
#test {
    position: fixed;
    top: 0;
    left: 0;
}
#test2 {
    position: fixed;
    top: 0;
    right: 0;
    list-style: none;
}
#test2 > li {
    background: yellow;
    width: 350px;
    height: 600px;
    /* transition: height 0.3s ease, width 0.2s ease;*/
    overflow: hidden;
    margin-top: -30px;
    padding-top: 30px;
    margin-right: -50px;
}
.hide {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css">
<ul id="test">
    <li class="a">1</li>
    <li class="b">2</li>
    <li class="c">3</li>
</ul>
<ul id="test2">
    <li data-prod="a" class="animated">1</li>
    <li data-prod="b" class="animated">2</li>
    <li data-prod="c" class="animated">3</li>
</ul>

\$\endgroup\$
  • \$\begingroup\$ A better way would be pure JS. \$\endgroup\$ – Abandoned Account Apr 17 '15 at 9:45
  • \$\begingroup\$ @HassanAlthaf Could you write an answer explaining why and how pure JS would be better? \$\endgroup\$ – 200_success Apr 17 '15 at 9:53
  • \$\begingroup\$ @200_success got exams.. \$\endgroup\$ – Abandoned Account Apr 17 '15 at 9:57
2
\$\begingroup\$

Your demonstration could benefit from better semantic markup. In particular, the numbers on the left should be treated as navigation links, whose target is the item to be animated. If you remove all JavaScript and CSS, the functionality degrades gracefully.

An additional benefit is that the link directly identifies the item to be manipulated, so that you don't have to locate the element yourself using a var prodName = $(this).data('prod'); if (prodName == className) … check.

You don't need to define a .hide { display: none; } rule in your CSS. The jQuery $.hide() and $.show() methods can do that job.

Take care to localize $this.

$(document).ready(function () {
    $('nav > ul > li > a').on('click', function () {
        $('li.animated').hide();
        $($(this).attr('href')).each(function () {
            var $this = $(this);
            $this.show()
                 .removeClass('bounceInRight')
                 .addClass('bounceOutRight');
            setTimeout(function () {
                $this.removeClass('bounceOutRight')
                     .addClass('bounceInRight');
            }, 400);
        });
    })
});
nav > ul > li {
    display: inline-block;
    padding: 10px;
}
nav > ul > li > a {
    color: black;
    text-decoration: none;
}
ul {
    position: fixed;
    top: 0;
    right: 0;
    list-stlye: none;
}
nav > ul {
    right: auto;
    left: 0;
}
li.animated {
    background: yellow;
    width: 350px;
    height: 600px;
    /* transition: height 0.3s ease, width 0.2s ease;*/
    overflow: hidden;
    margin-top: -30px;
    padding-top: 30px;
    margin-right: -50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css">
<nav>
    <ul>
        <li><a href="#a">1</a></li>
        <li><a href="#b">2</a></li>
        <li><a href="#c">3</a></li>
    </ul>
</nav>
<ul>
    <li class="animated" id="a">1</li>
    <li class="animated" id="b">2</li>
    <li class="animated" id="c">3</li>
</ul>

\$\endgroup\$
  • \$\begingroup\$ A downside of this approach is that a browser will interpret the anchor tags as traditional links to content on the same page, causing the page to scroll up or down to the corresponding <li> element if it's not already at the top of the page. \$\endgroup\$ – Thriggle Apr 17 '15 at 13:24
0
\$\begingroup\$

Could you write an answer explaining why and how pure JS would be better?

Pure JS is better for a few reasons: 1) better control over timing. With CSS animations, some browsers (Safari) will often sync various animations on the page together for better performance. Not the case with JS

2) better bounce. With JS you can pretty much use any logic you want for the animation. This means you can use a full-blown physics engine if you want to.

3) easily cancel, change the animation on the fly.

Of course, there are times when CSS based animations are more than good enough for the job. It seems to be the case in this situation. If you were gonna add touch controls with swipes, I would consider pure JS animations.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.