javascript - Jquery callback not working when animation options are included (masonry plugin) - Stack Overflow

admin管理员组

文章数量:1427340

I am implementing David DeSandro's JQuery Masonry plugin for a site i'm trying to build. I am trying to run a callback on the masonry function so that i can scroll to the relevant part in the page after it runs but for some reason can't get it to work when I have the animation turned on. The docs can be seen at . When I run the following code it works fine and the alert only happens once the masonry function has run:

$wall.masonry(
{
columnWidth: 216,
itemSelector: '.box:not(.invis)',
animate: false
},
function()
{
alert("Finished?");
}
);

However when i run the following code with the animation options included the alert runs before the animation has finished:

$wall.masonry(
{
columnWidth: 216,
itemSelector: '.box:not(.invis)',
animate: true,
animationOptions: {
  duration: speed,
  queue: false
}
},
function()
{
alert("Finished?");
}
);

I would really appreciate any pointers anyone can give me as to how to prevent the alert happening until the animation has pleted as i'm stumped! Thanks so much for your help,

Dave

I am implementing David DeSandro's JQuery Masonry plugin for a site i'm trying to build. I am trying to run a callback on the masonry function so that i can scroll to the relevant part in the page after it runs but for some reason can't get it to work when I have the animation turned on. The docs can be seen at http://desandro./demo/masonry/docs/#options. When I run the following code it works fine and the alert only happens once the masonry function has run:

$wall.masonry(
{
columnWidth: 216,
itemSelector: '.box:not(.invis)',
animate: false
},
function()
{
alert("Finished?");
}
);

However when i run the following code with the animation options included the alert runs before the animation has finished:

$wall.masonry(
{
columnWidth: 216,
itemSelector: '.box:not(.invis)',
animate: true,
animationOptions: {
  duration: speed,
  queue: false
}
},
function()
{
alert("Finished?");
}
);

I would really appreciate any pointers anyone can give me as to how to prevent the alert happening until the animation has pleted as i'm stumped! Thanks so much for your help,

Dave

• javascript
• jquery
• jquery-plugins
• jquery-callback

Share Improve this question Follow asked Jan 20, 2011 at 17:16 deshgdeshg 1,25344 gold badges2929 silver badges4646 bronze badges 2

• Did you check if the speed variable is properly defined? – Axel Fontaine Commented Jan 20, 2011 at 17:28
• Yes the speed variable is properly defined, the masonry code and animation runs perfectly, it's just that the alert doesn't wait until the animation finishes before it runs (if the animation is turned on). Thanks very much for your help, any other thoughts would be much appreciated! – deshg Commented Jan 20, 2011 at 18:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

There's something you can do, but it to work in your sense requires a small hack:

The object to animationOptions passed can take a plete property, which defines a function which will be fired after the animation is plete.

The problem is, this will be the case for each and every of your blocks, since every block is animated separately. But you could get around this like so:

var boxCount = $wall.find('box').size(),
    counter = 0,
    onComplete = function() {
        if (counter < boxCount) counter++;
        else {
            alert("Finished?"); // <-- Here goes your actual callback!
            counter = 0;
        }
    }

$wall.masonry({
    columnWidth: 216,
    itemSelector: '.box:not(.invis)',
    animate: true,
    animationOptions: {
        duration: speed,
        queue: false,
        plete: onComplete
    }
});

本文标签： javascriptJquery callback not working when animation options are included (masonry plugin)Stack Overflow