Animating Two Divs one after the other

Question

I have a menu made up of buttons. When i hit the first button a jquery UI Tab appears opacity sets to 0.7. Then when i hit the second button in the menu i want the first UI tab opacity to change to 0 and a second UI tab to appear the same as the first one. I have 4 button in my menu so i will want this to work for each.

$(document).ready(function(){
  $("#bt1").click(function(){
    $("#info1").animate({opacity:'0.7'});   
 });
});


$(document).ready(function(){
  $("#bt2").click(function(){
    $("#info1").animate({opacity:'0'}); 
    $("#info2").animate({opacity:'0.7'});   
 });
});

HTML

<div id="info1" class="info">
<div id="tabs"> 
<ul>
    <li><a href="#tabs-1">First</a></li>
    <li><a href="#tabs-2">Second</a></li>
    <li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1"><p></p></div>
<div id="tabs-2"><p></p></div>
<div id="tabs-3"><p></p></div>
</div>

<div id="info2" class="info">

<div id="tabs">

<ul>
    <li><a href="#tabs-1">Fourth</a></li>
    <li><a href="#tabs-2">Fifth</a></li>
    <li><a href="#tabs-3">Sixth</a></li>
</ul>
<div id="tabs-1"><p>    </p></div>
<div id="tabs-2"><p>    </p></div>
<div id="tabs-3"><p>    </p></div>

I am very new to jQuery and any help would be appreciated

Answer 1

Try this instead...

$(document).ready(function(){
    $("#bt1").click(function(){
        $("#info1").animate({opacity:'0.7'});
    });
    $("#bt2").click(function(){
        $("#info1").animate({opacity:'0'}, 400, "swing", function() {
            $("#info2").animate({opacity:'0.7'});
        });
    });
});

I've got rid of one of the $(document).ready() blocks, as you don't need them both - you can do it in one. Then I put the 2nd animation into the callback function of the 1st animation, so it will wait till the 1st completes.

Answer 2

How about:

$(document).ready(function(){
$("#bt1, #bt2, #bt3, #bt4").click(function(){
   Var id = $(this).attr("id").substring(2);
$("#info1, #info2, #info3, #info4").animate({opacity:'0'},
function () {
$("#info"+id).animate({opacity:'0.7'});
});

});

That way it works for all four of your buttons, as well as applying a callback.

edit

$(document).ready(function(){
$("#bt1, #bt2, #bt3, #bt4").click(function(){
Var id = $(this).attr("id").substring(2);
$(".current").removeClass('current');
$("#info"+id).addClass('current').animate({opacity:'0.7'});
$("#info1, #info2, #info3, #info4").not('.current').animate({opacity:'0'});   
});

May address what you need better (it'll animate the old out and the new in at the same time and doesn't require you to change your html)

Answer 3

HTML

<div id="nav">
    <ul>
        <li><a class="btn current" href="">Home</a></li>
        <li><a class="btn" href="">About</a></li>
        <li><a class="btn" href="">Info</a></li>
        <li><a class="btn" href="">Contact</a></li>
    </ul>
</div>

jQuery

$(".btn").click(function() {
    $('.btn').removeClass('current');
    $(this).addClass('current').animate({opacity:1}, function() {
        $('.btn:not(.current)').animate({opacity:0.7})
    });
    return false;
});

jsFiddle demo: http://jsfiddle.net/9APzE/

The idea is simple: 1 class for "default" state (.btn), 1 class for "highlighted" state (.current). You could have 24 buttons, and this technique would work. Plus, you'll never have to add something like ".btn-24..." to any line of the jQ function.

Answer 4

http://api.jquery.com/animate/

See in the docs or in any tutorial.

Solution:

$(document).ready(function(){
        $("#bt2").click(function(){
            //Start first animation.
            $("#info1").animate({opacity:'0'},
                /*on Animation Ends in the future*/
                function () {
                    //Start second animation.
                    $("#info2").animate({opacity:'0.7'});   
        });
    });
});