jquerybookblock

Debugging jQuery Animation


I am using a page flipping plugin called "bookblock" (demo can be found here).

I have put images on each page, which I am adding dynamically. The problem is when I flip the page, the previous and next divs are suddenly squished together on each side of the book. The following screenshot is taken mid-animation of a page flip.

enter image description here

As you can see each page in the book is "item1", "item2", etc. All of the display properties are set to "none", but for some reason they can be seen.

A live version of this site can be found here. I have tried adding

$(".bb-item").hide();

Right before the animation sequence, which appears to begin on line 259 of js/jquery.bookblock.js, but no luck. How else could I go about debugging this problem?

UPDATE: I am very sorry, I should have mentioned that you can access the flipbook by clicking on the "expand" icon, in the bottom right of each div in the live version.


Solution

  • I am not sure why this works, but face's useful comment helped me find that resizing the window actually fixes the problem.

    Right after I update the items inside the book, I trigger the resize method:

    $(window).resize();
    

    And it seems to get rid of the problem, thanks!

    It appears the bookblock js file uses something called debouncedresize which seems to attach a listener to a window resize event. I suspect this might be related, but currently, I don't have a proper explanation of this behavior.