Question

I’m animating an image a certain amount from one menu button. It slides out per menu button. Then there’s another link that when clicked the image needs to slide out more. This isn’t happening.

Here’s the jQuery

$(document).ready(function() {
    $("#busoptbio").hide();
    $("#current").toggle(function() {
        $("#busoptbio").show();
        $("#busoptbio").animate({
            left: '+=348px'
        }, 1200);
    }, function() {
        $("#busoptbiolnk").click(function() {
            $("#busoptbio").animate({
                left: '+=550px'
            }, 1200); < ------2nd animate not working
        });
    });
});

Thanks so much,
Andrea

Answer 1

Currently you are using the toggle function which binds two events to a single link, in your case this is the element with the ID #current. These events will only be called when you click on #current. You can’t listen for a click inside of the toggle, which is already a listener on its own.

So if you want to have the second animation happen when you click “Meet the experts”, you’ll need to approach it differently:

$(document).ready(function() {

    $("#busoptbio").hide();
    $("#current").click(function(e) {
        e.preventDefault();
        $("#busoptbio").show();
        $("#busoptbio").animate({
            left: '+=348px'
        }, 1200);
    });

    $("#busoptbiolnk").click(function() { // When the link is clicked, the rest rolls out
        $("#busoptbio").animate({
            left: '+=550px'
        }, 1200);
    });
});

Hope this helps!

EDIT

If youre gonna use a <a> as a trigger, be sure to either not define href or prevent the default event from being triggered (going to the link in href).

I have updated the code to prevent the default action, but as mentioned before this could also be solved by changing the <a>