Slicing animation not working correctly with jQuery 1.7

[dennyf]

Hi All,

Just tested the slider with jQuery 1.7 and it seems that the slice animations are not working correctly - the images are displayed partially, not full width. I really hope that this issue will be fixed soon, as the new WordPress 3.3 that implements jQuery 1.7 will be released very soon and many themes and plugins that implement the slider will have this issue.

Thank you for the great slider! :)

[johnatan]

Noticed same issue. Hopefully will be fixed, as i have to fallback to older version of Jquery.

[paulzwagerman]

Noticed same issue here, please fix or help with a workaround using jQuery 1.7.

[dennyf]

I did a quick research and found the reason for the problem - it is a bug in jQuery 1.7 that hopefully will be fixed in jQuery 1.7.1

http://bugs.jquery.com/ticket/10669

So, the bug is that when calling the jQuery animate function to change size by percentage, it changes it by pixels - so the following code:

$('#elem').animate({height:'100%'});

will animate the #elem element to 100px

At this point (while this bug exists) I can suggest using the slider height when animating, instead of 100% - so in the code whenever there is an animation to change the slice height to 100%, for example:

slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); }, (100 + timeBuff));

can be used the slider height:

slice.animate({ height:slider.height(), opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); }, (100 + timeBuff));

Of course this can be optimized by setting the slider height to a variable first somewhere in the beginning of the code:

var sliderHeight = slider.height();

and then reuse the variable instead of retrieving the height for each animation:

slice.animate({ height:sliderHeight , opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); }, (100 + timeBuff));

Note: This is my quick and simple solution, there may be more better solutions than this one.

[paulzwagerman]

Hi Denny,

Thanks a lot for reply-ing!

Also thanks for the explanation and your solution!

Regards,

Paul

On Tue, Nov 15, 2011 at 3:23 PM, dennyf reply@reply.github.com wrote:

I did a quick research and found the reason for the problem - it is a bug in jQuery 1.7 that hopefully will be fixed in jQuery 1.7.1

http://bugs.jquery.com/ticket/10669

So, the bug is that when calling the jQuery animate function to change size by percentage, it changes it by pixels - so the following code:

$('#elem').animate({height:'100%'});

will animate the #elem element to 100px

At this point (while this bug exists) I can suggest using the slider height when animating, instead of 100% - so in the code whenever there is an animation to change the slice height to 100%, for example:

slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });                                                }, (100 + timeBuff));

can be used the slider height:

slice.animate({ height:slider.height(), opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });                                                }, (100 + timeBuff));

Of course this can be optimized by setting the slider height to a variable first somewhere in the beginning of the code:

var sliderHeight = slider.height();

and then reuse the variable instead of retrieving the height for each animation:

slice.animate({ height:sliderHeight , opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });                                                }, (100 + timeBuff));

Note: This is my quick and simple solution, there may be more better solutions than this one.

---

Reply to this email directly or view it on GitHub: https://github.com/gilbitron/Nivo-Slider/issues/237#issuecomment-2745147