Title: Animate jumpy widget
Last modified: August 21, 2016

---

# Animate jumpy widget

 *  Resolved [DSafari](https://wordpress.org/support/users/dsafari/)
 * (@dsafari)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/animate-jumpy-widget/)
 * Could you please animate height (probably with some js + css animate).
 * My testimonials widgets are all jumpy and and really wreck the flow of a page.
 * Let me know when you can put this in 🙂
 * [http://wordpress.org/extend/plugins/testimonials-widget/](http://wordpress.org/extend/plugins/testimonials-widget/)

Viewing 15 replies - 1 through 15 (of 17 total)

1 [2](https://wordpress.org/support/topic/animate-jumpy-widget/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/animate-jumpy-widget/page/2/?output_format=md)

 *  Plugin Contributor [Michael Cannon](https://wordpress.org/support/users/comprock/)
 * (@comprock)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/animate-jumpy-widget/#post-3855613)
 * Huh? Got an example or URL of problem page?
 * I’m guessing that the testimonial height fluctuates. If so, then put a smaller`
   char_limit` on the widget, like 250 and set a `height` of 250. Experiment further
   as needed.
 *  Thread Starter [DSafari](https://wordpress.org/support/users/dsafari/)
 * (@dsafari)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/animate-jumpy-widget/#post-3855650)
 * Hi Michael,
 * It’s on a dev site, so no examples besides using a limited width widget which
   would have varying height for each testimonial.
 * I dug into your code and it was an easyish fix. From line 728 of testimonials-
   widget.php please add:
 *     ```
       <script type="text/javascript">
       var tpadding = $('.testimonials-widget-testimonials').height() - $('.testimonials-widget').height();
   
       function nextTestimonial{$widget_number}() {
       	if ( ! jQuery('.{$id_base}').first().hasClass('hovered') ) {
       		var active = jQuery('.{$id_base} .active');
       		var next   = (jQuery('.{$id_base} .active').next().length > 0) ? jQuery('.{$id_base} .active').next() : jQuery('.{$id_base} .testimonials-widget-testimonial:first');
   
       		active.fadeOut(1250, function(){
       			active.removeClass('active');
       			next.fadeIn(500);
       			next.removeClass('display-none');
       			next.addClass('active'); 						
   
       			$('.testimonials-widget-testimonials').animate({
       			height: next.height() + tpadding
       			});
   
       		});
       	}
       }
       ```
   
 * If you can’t add this (or similar) please let me know as I can just fork your
   code for myself – but I figure others will want this too.
    Just 4 new lines of
   js.
 *  Plugin Contributor [Michael Cannon](https://wordpress.org/support/users/comprock/)
 * (@comprock)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/animate-jumpy-widget/#post-3855654)
 * I’m still really curious what you’re trying to accomplish that this solves.
 * Why doesn’t adjusting the character limit and heigh properly help?
 *  Thread Starter [DSafari](https://wordpress.org/support/users/dsafari/)
 * (@dsafari)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/animate-jumpy-widget/#post-3855663)
 * Animated resizing of the div.
 * See:
    [https://s3.amazonaws.com/DigitalSafari/animatetestimonials.mov](https://s3.amazonaws.com/DigitalSafari/animatetestimonials.mov)
 * Your code makes all widgets below jump around without the animation.
 *  Plugin Contributor [Michael Cannon](https://wordpress.org/support/users/comprock/)
 * (@comprock)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/animate-jumpy-widget/#post-3855668)
 * Ah, now it get it. Thank you for pointing this out.
 * Now, I’ll try to figure out how to account for multiple widgets on a page.
 *  Thread Starter [DSafari](https://wordpress.org/support/users/dsafari/)
 * (@dsafari)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/animate-jumpy-widget/#post-3855690)
 * That might be tricky…
 *  Plugin Contributor [Michael Cannon](https://wordpress.org/support/users/comprock/)
 * (@comprock)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/animate-jumpy-widget/#post-3855756)
 * For now, while I try to figure out something smoother, you can put your customizations
   into filter so that the plugin code can be updated safely.
 * I call the filter like so, `$scripts = apply_filters( 'testimonials_widget_testimonials_js',
   $scripts, $testimonials, $atts, $widget_number );`. You can work from that what
   you need further.
 *  Plugin Contributor [Michael Cannon](https://wordpress.org/support/users/comprock/)
 * (@comprock)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/animate-jumpy-widget/#post-3855760)
 * Could you please try out [http://downloads.wordpress.org/plugin/testimonials-widget.zip](http://downloads.wordpress.org/plugin/testimonials-widget.zip)?
 * It has the animate in place now. I’m not totally happy with the first animation.
   It still jumps, but all the rest seem solid.
 *  Thread Starter [DSafari](https://wordpress.org/support/users/dsafari/)
 * (@dsafari)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/animate-jumpy-widget/#post-3855783)
 * Sorry this version doesn’t take into account .testimonials-widget-testimonials
   padding and borders so it ends of being to small for the container.
 * My version had tpadding variable to take this into account.
 *  Thread Starter [DSafari](https://wordpress.org/support/users/dsafari/)
 * (@dsafari)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/animate-jumpy-widget/#post-3855784)
 * This new code below now works perfectly for me and also takes into account the
   first animation now.
 *     ```
       <script type="text/javascript">
       var {$tw_wrapper} = jQuery('.{$id_base}');
       tpadding = {$tw_wrapper}.height() - $('.testimonials-widget').height(); //tpadding is the difference in height to take into account all styling options
       {$tw_wrapper}.height({$tw_wrapper}.height()); //fixes first animation by defining height to adjust
   
       function nextTestimonial{$widget_number}() {
       	if ( ! jQuery('.{$id_base}').first().hasClass('hovered') ) {
       		var active = jQuery('.{$id_base} .active');
       		var next   = (jQuery('.{$id_base} .active').next().length > 0) ? jQuery('.{$id_base} .active').next() : jQuery('.{$id_base} .testimonials-widget-testimonial:first-child');
   
       		active.fadeOut(1250, function(){
       			active.removeClass('active');
       			next.fadeIn(500);
       			next.removeClass('display-none');
       			next.addClass('active');
       			{$tw_wrapper}.animate({ height: next.height() + tpadding}); //added padding
       		});
       	}
       }
       ```
   
 * Edit: added code tags
 *  Plugin Contributor [Michael Cannon](https://wordpress.org/support/users/comprock/)
 * (@comprock)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/animate-jumpy-widget/#post-3855787)
 * Could you please try out [http://downloads.wordpress.org/plugin/testimonials-widget.zip](http://downloads.wordpress.org/plugin/testimonials-widget.zip)?
 * I’ve modified your adaptions for multiple widgets. I appreciate the initial height
   fit.
 * Do note that if any of the height options are set, then the animate code is disabled.
 *  Thread Starter [DSafari](https://wordpress.org/support/users/dsafari/)
 * (@dsafari)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/animate-jumpy-widget/#post-3855789)
 * Just checked and your code wrecks the first testimonial size – it’s too small.
 * Change line 764 to:
    {$tw_wrapper}.height( {$tw_wrapper}.height() );
 * It’s just supposed to specify the css height of itself, not the active testimonial
   div (which is smaller).
 *  Plugin Contributor [Michael Cannon](https://wordpress.org/support/users/comprock/)
 * (@comprock)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/animate-jumpy-widget/#post-3855793)
 * Changed. Please test.
 *  Thread Starter [DSafari](https://wordpress.org/support/users/dsafari/)
 * (@dsafari)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/animate-jumpy-widget/#post-3855795)
 * Change line 764:
    `{$tw_wrapper}.height( jQuery('.{$tw_wrapper}').height() );`
   to: `{$tw_wrapper}.height({$tw_wrapper}.height());`
 * Your code doesn’t define height of tw_wrapper on start and it’s still jumpy on
   the first transition.
 * My code (2nd above) is smooth
 *  Plugin Contributor [Michael Cannon](https://wordpress.org/support/users/comprock/)
 * (@comprock)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/animate-jumpy-widget/#post-3855796)
 * Argh… getting tired. Fixed and seems much smoother on first as you suggested.
 * Please try again from SVN trunk zip.

Viewing 15 replies - 1 through 15 (of 17 total)

1 [2](https://wordpress.org/support/topic/animate-jumpy-widget/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/animate-jumpy-widget/page/2/?output_format=md)

The topic ‘Animate jumpy widget’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/testimonials-widget_c56561.svg)
 * [Testimonials Widget](https://wordpress.org/plugins/testimonials-widget/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/testimonials-widget/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/testimonials-widget/)
 * [Active Topics](https://wordpress.org/support/plugin/testimonials-widget/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/testimonials-widget/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/testimonials-widget/reviews/)

 * 17 replies
 * 2 participants
 * Last reply from: [Michael Cannon](https://wordpress.org/support/users/comprock/)
 * Last activity: [12 years, 10 months ago](https://wordpress.org/support/topic/animate-jumpy-widget/page/2/#post-3855816)
 * Status: resolved