flickering

[timtorfs]

Hi,

first of all great job on this jquery plugin it's easy to use and does a magnificent job. However i have noticed that the plugin flickers the text you want to expand when i try to expand a div before sliding down is there any workaround for this without getting your text to slightly flicker and still see a smooth slidedown?

i have noticed example 3 on the site also has this kind off flickering when you expand it http://plugins.learningjquery.com/expander/demo/index.html

[hlebasko7]

I have the same sentiments and same issues as above. Is there a way to fix this flickering issue? Thanks!

[gheitmann]

same here when the text contains paragraphs

[elundin]

Hi there!

First of all, thanks for a great plugin :)

I have the same problem as the others. Have tested it a bit and found out that it works great with the slideUp/slideDown effect if the text in the expanding div is not using "p" tags. It is when you are using them the flickering problem appears.

Best

[NotARobit]

I've looked into this. There are two causes to the flickering.

The first is caused by the way the animations are called. First, .summary is completely hidden. Then, .details is animated in. When using the slideDown effect, this animates the height starting with a height of 0. So our content went from a height of whatever .summary's height was, instantly down to 0, causing an unattractive appearance. A smoother animation would start from the height of summary instead of a height of 0.

The second cause of flickering, is due to the fact that the slideDown effect uses overflow:hidden during the animation. When overflow is set set to hidden, this causes a new block formatting context, which means if the p inside of .details has a margin-top of say 10px, the p will now push down 10px from the top of .details where it was previously pushing down off of the bottom of whatever element was above .details. This results in all the text inside of .details shifting down 10px during the length of the animation then shifting back up after the animation is concluded and overflow:hidden is removed.

One possible fix would be to write our own animation effect that starts at .summary's height instead of 0. Also, we'd have to make sure the that .details and .summary always have their own block formatting context.

[diosney]

+1 to this. Very unpleasant effect.

[dapinitial]

I think that if it's doing preserveWords then it needs to change that to true when the read more is clicked and then slide down, instead of completely swapping the containers and applying display none and block properties accordingly.

[travco]

I'll look into how the jagged shifting of elements might be avoided, but for now I suggest that anyone (still) trying to deal with this to use an animation effect other than slideDown if it's block-level elements that are being modified by expander.

[travco]

Based on the avenues I've checked, there are some avoidable jagged movement of elements (pointed out by @NotARobit ) if the elements have margins.

As far as I can tell (and I may be failing to interpret some of the more limited descriptions of people in this issue thread) the remaining are unavoidable issues with how the plugin currently works. The most prominent being from using the slideDown effect in block-formatting contexts, fadeIn and fadeOut aren't causing "flickering", just unnecessarily high start positions for animations. These unavoidable issues are duplicates of #41.

@kswedberg: As all of the new issues in this thread were addressed by @NotARobit's findings and the rest are duplicates, close issue?

[timtorfs]

Yes you can close it

Met vriendelijke groeten - Salutations distinguées - Kind regards

Tim Torfs

Van: Travis Palmer [mailto:notifications@github.com] Verzonden: donderdag 31 juli 2014 16:03 Aan: kswedberg/jquery-expander CC: Tim Torfs - ROLAND Onderwerp: Re: [jquery-expander] flickering (#60)

Based on the avenues I've checked, there is some avoidable jagged movement of elements (pointed out by @NotARobithttps://github.com/NotARobit ) if the elements have margins.

As far as I can tell (and I may be failing to interpret some of the more limited descriptions of people in this issue thread) the remaining are unavoidable issues with how the plugin currently works. The most prominent being from using the slideDown effect in block-formatting contexts, fadeIn and fadeOut aren't causing "flickering", just unnecessarily high start positions for animations. These unavoidable issues are duplicates of #41https://github.com/kswedberg/jquery-expander/issues/41.

@kswedberghttps://github.com/kswedberg: As all of the new issues in this thread were addressed by @NotARobithttps://github.com/NotARobit's findings and the rest are duplicates, close issue?

— Reply to this email directly or view it on GitHubhttps://github.com/kswedberg/jquery-expander/issues/60#issuecomment-50762401.

[kswedberg]

ok. thanks, @timtorfs!