CODEWITHSUNDEEP
jqueryjquery-waypoints
user1339113
user1339113

Reputation: 65

jQuery waypoint function

I'm new to jQuery, and I don't know how to do much.

I have the jQuery waypoint plugin and I also have a function that animates a progress bar. What I need to do is animate the progress bar when a waypoint is reached. I have both pieces of code, but cant seem to put them together.

I need to put this:

$(function() {
    $(".meter > span").each(function() {
        $(this)
            .data("origWidth", $(this).width())
            .width(0)
            .animate({
                width: $(this).data("origWidth")
        }, 1200);
    });
});

Inside of this:

$(function() {
    $('#skills-1').waypoint(function() {
        (function here)
    });
});

Upvotes: 1

Views: 1697

Answers (1)

ahren
ahren

Reputation: 16961

$(function() {
    $('#skills-1').waypoint(function() {
        $(".meter > span").each(function() {
            $(this)
                .data("origWidth", $(this).width())
                .width(0)
                .animate({
                    width: $(this).data("origWidth")
            }, 1200);
        });
    });
});

Just put it inside, without the function wrapper.

Or if you have multiple waypoints, it's better to make a separate function, like this:

function animateProgressBar(){
    $(".meter > span").each(function() {
        $(this)
            .data("origWidth", $(this).width())
            .width(0)
            .animate({
                width: $(this).data("origWidth")
        }, 1200);
    });
}
$('#skills-1').waypoint(animateProgressBar);
$('#skills-2').waypoint(animateProgressBar);

Upvotes: 1

Related Questions