CODEWITHSUNDEEP
jqueryjquery-animateelement
Andrea
Andrea

Reputation: 477

JQuery animate same item twice

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

Upvotes: 1

Views: 1597

Answers (2)

Joey
Joey

Reputation: 1676

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>

Upvotes: 1

Benn
Benn

Reputation: 1420

From looking at the site, the animation works fine, the problem is your click event is on the div rather than the link. Go from: $("#busoptbiolnk").click to $("#busoptbiolnk a").click so that the <a> tag itself receives the click.

Tested in Chrome, on the second link click below the colored box instead of on the text.

EDIT:

I see that you added my suggestion, your problem is now the toggle as Joey says. It now toggles if you click the 'Business Optimization services', click it again, and then click the link. Remove the toggle and just bind the events without it.

$(document).ready(function(){

  $("#busoptbio").hide();
  $("#current").click(function() {
    $("#busoptbio").show();
    $("#busoptbio").animate({left: '+=340px'}, 1200);
    return false;
  });
  $("#busoptbiolnk a").click(function(){
    $("#busoptbio").animate({left: '+=550px'}, 1200);
    return false;
  });
});

EDIT again:

your page gets redirected before the animation plays, add return false to the click handlers (as above) to fix. Alternatively, set a#current's href to "#"

Upvotes: 0

Related Questions