How to add Slide & Fade, and Delay

[Bogh]

Hi,

This is my first post here, and I really need your help.

Please help on adding a Slide&Fade effect, and a Delay, on the following Mootools code:

---------------------

    $('updates_pulldown').addEvents({

      mouseenter: function(){

    $('updates_pulldown').removeClass('updates_pulldown').addClass('updates_pulldown_active')

    $('pulldown_contents_wrapper').set('tween', {

    }).show();

      },

      mouseleave: function(){

    $('pulldown_contents_wrapper').set('tween', {

    }).hide();

    $('updates_pulldown').removeClass('updates_pulldown_active').addClass('updates_pulldown');

      },

    });

---------------------

I have tried some things as you can see below, but nothing worked for me:

---------------------

    $('updates_pulldown').addEvents({

      mouseenter: function(){

    $('updates_pulldown').removeClass('updates_pulldown').addClass('updates_pulldown_active')

    $('pulldown_contents_wrapper').set('tween', {

     duration: 1000,

     physics: 'pow:in:out',

     transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'

    }).SlideOut();

      },

      mouseleave: function(){

    $('pulldown_contents_wrapper').delay(1000).set('tween', {

    duration: 1000,

    }).SlideIn();

    $('updates_pulldown').removeClass('updates_pulldown_active').addClass('updates_pulldown');

      },

    });

-----------------------

Thanks a lot.

[Johnny Fuery]

The show() and hide() function calls you're making will change the display style to block and none, respectively. They aren't part of Fx or Fx.Tween.

If you really want to use Tween and you want to get it going from the Element reference, you should use the tween() method. Since (I'm guessing) you want to adjust the height, you'll need to make sure your element has a CSS float property set. Then do something like Element.tween('height', '0px')

If you shove this into a JSFiddle, someone on this list will probably just fix it for you.

For delay, it needs to be on a full function reference, either an anonymous inline declaration or a closure, e.g.,:

(function(){ console.log('this will run in 1000 milliseconds'); }).delay(1000)

...or...

var foo = function(){ console.log('this will run in 1000 milliseconds'); };

foo.delay(1000);

 

Johnny Fuery
President/Principal Engineer
Fuery Solutions -- makers of MerusCase
1736 Franklin Street, Suite 350
Oakland, CA 94612

510.550.5000 Main
925.997.3878 Mobile
510-836-0915 Fax
j...@fuery.com

[Sanford Whiteman]

Please put runnable, editable code @ jsFiddle.net. This will make it a
lot easier for someone to help you (remember, element
'updates_pulldown' is meaningless outside of your domain unless you
can show us the scaffolding of your site at jsFiddle).

Thanks,

Sandy

[Bogh]

Thanks for your replies, I have posted the code to JSfiddle: http://jsfiddle.net/eKTwM/1/

I have used tween because this is what I have found on my searches, I am not even sure if this is the best way. 

I think I would like the height to be adjusted automatically, on slide, because I can't really restrict the box to a height.

All I want is to add a slide & fade, and a delay on mouseleave.

I appreciate your help

[Sanford Whiteman]

> Thanks for your replies, I have posted the code to JSfiddle:
> http://jsfiddle.net/eKTwM/1/

jsFiddle can't read PHP. I almost think your Fiddle is harder to
execute than an e-mail!

In jsFiddle, you put inner markup in the "HTML" pane (everything
*inside* the BODY, not including the BODY tag), your styles in "CSS,"
and JS in "JS." You don't need to wrap JS in domready.

The idea is for the "Result" pane that combines and runs the other
panes, to actually be a page of HTML elements and images, not dumped
PHP code.

Working in jsFiddle can be amazing help in refactoring and simplifying
problematic code; I don't think I could write adaptable classes were
it not for jsFiddle helping me to be generic.

I realize I am being strict about this, but the payoff is that someone
will give you a great solution. But it has to be de-mangle-ified
first.

-- S.

[Matthew Hazlett]

A lot of times, its easier to build the interaction/concept/widget in a
standalone version. This is particularly helpful if its a concept you
are having trouble with and/or are trying to enlist help from others.
One you have your interaction/concept/widget working it should be fairly
easy to integrate with your php application.

May I suggest this as a starting point?

[Bogh]

Thank you all for your time. I have solved it somehow.

Sorry for not posting a functional code in jsfiddle, I'll do it better next time when I'll need your help.

Thanks again, wish you a good day!

[Sanford Whiteman]

Glad you got it working. Looking forward to your next question!

-- S.