#289 new
Lea Hayes

Element.appear followed by Element.fade

Reported by Lea Hayes | May 23rd, 2010 @ 04:45 PM

When an element is shown with ".appear" and then hidden with ".fade" (and perhaps shown again) by user interaction several problems occur:
- Element is either instantly hidden (or shown depending upon which effect came first) when the first effect finishes. - Element is often hidden (or shown) when it should be the opposite.

I have found that the following change has fixed this issue for me, but perhaps something a little more generic could be utilized for each effect pair?

Element.addMethods({
   cancelFadeEffect: function(element) {
      if (element.fadeEffect) {
         element.fadeEffect.cancel();
         element.fadeEffect = null;
      }
   },
   finalizeFadeEffectOptions: function(element, options) {
      options = options || {};

      // Previous "afterFinish" event.
      var temp = options.afterFinish;
      // Attach new "afterFinish" event.
      options.afterFinish = function() {
            // Clear previous fade effect (prevent memory leak).
            element.fadeEffect = null;
            // Daisy-chain previous "fadeEffect" event.
            if (temp)
               temp.apply(options, arguments);
         };
      return options;
   },
   appear: function(element, options) {
      // Avoid conflicting "appear" and "fade" events.
      element.cancelFadeEffect();

      // Make sure element is displayed but invisible.
      if (!element.visible()) {
         element.setOpacity(0.0);
         element.show();
      }
      // Begin "appear" effect.
      element.fadeEffect = new Effect.Appear(element, element.finalizeFadeEffectOptions(options));
   },
   fade: function(element, options) {
      // Avoid conflicting "appear" and "fade" events.
      element.cancelFadeEffect();

      // Begin "fade" effect only if element is shown.
      if (element.visible())
         element.fadeEffect = new Effect.Fade(element, element.finalizeFadeEffectOptions(options));
   }
});

Comments and changes to this ticket

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

script.aculo.us is an open-source JavaScript framework for visual effects and interface behaviours.
<br/><b>Source available from github</b>
The Git repository resides at:
<a href="http://github.com/madrobby/scriptaculous">http://github.com/madrobby/scriptaculous</a>
<br/>Check out the current development trunk with:
<code>git clone git://github.com/madrobby/scriptaculous.git</code>
<br/>As <b>script.aculo.us 1.xx is feature-frozen</b>, this development trunk is for <b>bugfixes only</b>.
<br/>New development should happen only for
<b>script.aculo.us 2</b>.
<br/><b>Creating a bug report</b>
When creating a bug report, be sure to include as much relevant information as possible. Post a an example that shows off the problem. Preferably, <b>alter the unit tests</b> and show through either changed or added tests how the expected behavior is not occuring.

People watching this ticket

Pages