CODEWITHSUNDEEP
jquerycssanimation
Mitch Moccia
Mitch Moccia

Reputation: 529

What is a more elegant solution for jquery that handles multiple animations

This jQuery runs a number of hidden box animations, fadeOuts, fadeIns etc...

Here is a working jsfiddle

http://jsfiddle.net/xpancom/FNF3z/

You'll see the sample links on the left each reveal three hidden boxes. When you click another link it hides those three and shows three different ones.

This is just a sample, some of my pages have 10 sets of three hidden boxes... The jQuery is exceeding 300 lines to run all this.

Currently I have links with IDs like this

<li><a href="#" id="click1-12">Sample 1</a></li>
<li><a href="#" id="click1-13">Sample 2</a></li>

And the jQuery to run the animated fadeins and outs plus the active states of links

    $("#click1-12").click(function() {
    $("#work-uscg1 a").removeClass("work-active");
    $.fn.closeBoxes();
    $('#work-uscg1').delay(400).fadeIn();
    $('#work-uscg2').delay(600).fadeIn();
    $('#work-uscg3').delay(800).fadeIn();
    $('#work-uscg3a').delay(400).fadeIn();
    $("#click1-12").addClass("nav-active");
    $("#click2-11a").addClass("work-active");
});
$("#click1-13").click(function() {
    $("#work-toy1 a").removeClass("work-active");
    $.fn.closeBoxes();
    $('#work-toy1').delay(400).fadeIn();
    $('#work-toy2').delay(600).fadeIn();
    $('#work-toy3').delay(800).fadeIn();
    $('#work-toy3a').delay(400).fadeIn();
    $("#click1-13").addClass("nav-active");
    $("#click3-11a").addClass("work-active");
});

Thanks for any advice on how to create a more elegant solution.

Upvotes: 1

Views: 81

Answers (1)

Chad
Chad

Reputation: 5418

Well, I restructured a little bit, to give myself an easier time of it, and I'm only giving you the general idea here, but utilizing the indices of each list item compared to the actual content is probably a good bet. Here's some general markup: 

<div id="nav">
    <ul>
        <li><a href="#">Sample 1</a></li>
        <li><a href="#">Sample 2</a></li>
        <li><a href="#">Sample 3</a></li>
    </ul>
</div>

<div id="content">
    <div class="item">
        <div class="block-1">content 1-1</div>
        <div class="block-2">content 1-2</div>
        <div class="block-3">content 1-3</div>
    </div>

    <div class="item">
        <div class="block-1">content 2-1</div>
        <div class="block-2">content 2-2</div>
        <div class="block-3">content 2-3</div>
    </div>

    <div class="item">
        <div class="block-1">content 3-1</div>
        <div class="block-2">content 3-2</div>
        <div class="block-3">content 3-3</div>
    </div>
</div>

and I just hid the elements at first with css: 

.item div {
    display: none;
}

and now for the fun part... the javascript! well, jQuery, but you get my drift. Basically what you want is for one function to be able to control each element you want to affect. So, like I said, I utilized the index of the clicked element to change the status of the actual content:

var navClick = function() {
    var arrPosition = $(this).closest('li').index();
    var $targetDiv = $('#content').find('.item').eq(arrPosition);
    $targetDiv.find('.block-1').delay(400).fadeToggle();
    $targetDiv.find('.block-2').delay(600).fadeToggle();
    $targetDiv.find('.block-3').delay(800).fadeToggle();
}

$('#nav a').on('click', navClick);

Your markup overall could use some cleaning, along with the JS that you were using. With my method, you don't even need to specify a specific ID to each element. Let me know if you have any questions!

Oh, and here's a fiddle for you. http://jsfiddle.net/cArA3/1/

Upvotes: 1

Related Questions