[Moo] Fx.Tween - toggle

[mmjaeger]

Hello
I've got two questions - first, I couldn't find any toggle method for
Fx.Tween - is this correct?

second, I tried the code below - but it drives me nuts -
this.isCollapsed is always true so I can't get this thing to toggle -
does anybody spot what's wrong with it?
Thank you for your input!

        var fxTween = new Fx.Tween('streamWidget', {
                duration: 5000,
                onComplete: function() {
                        (this.isCollapsed) ? false : true;
                        console.log('onComplete: ' + this.isCollapsed);
                }.bind(this)
        });

        fxTween.set('height', 0);
        this.isCollapsed = true;

        $('btn-info').addEvent('click', function(e){
                if (this.isCollapsed) {
                        console.log('1st: ' + this.isCollapsed);
                        fxTween.start('height', 0, 250);
                        $('btn-info').set('src', './images/info-close.png');
                } else {
                        console.log('2st: ' + this.isCollapsed);
                        fxTween.start('height', 250, 0);
                        $('btn-info').set('src', './images/info-open.png');
                }
        }.bind(this))

[Oskar Krawczyk]

I'd probably do something like this: http://mooshell.net/eFW2Z/


On 30 Oct 2009, at 01:51, mmjaeger wrote:

>
> Hello
> I've got two questions - first, I couldn't find any toggle method for
> Fx.Tween - is this correct?
>
> second, I tried the code below - but it drives me nuts -
> this.isCollapsed is always true so I can't get this thing to toggle -
> does anybody spot what's wrong with it?
> Thank you for your input!
>
> var fxTween = new Fx.Tween('streamWidget', {
> duration: 5000,
> onComplete: function() {
> (this.isCollapsed) ? false : true;
> console.log('onComplete: ' + this.isCollapsed);
> }.bind(this)
> });
>
> fxTween.set('height', 0);
> this.isCollapsed = true;
>
> $('btn-info').addEvent('click', function(e){
> if (this.isCollapsed) {
> console.log('1st: ' + this.isCollapsed);
> fxTween.start('height', 0, 250);
> $('btn-info').set('src', './images/info-close.png');
> } else {
> console.log('2st: ' + this.isCollapsed);
> fxTween.start('height', 250, 0);
> $('btn-info').set('src', './images/info-open.png');
> }
> }.bind(this))

[Ryan Florence]

I've got a class for toggling a tween effect:

     http://moodocs.ryanflorence.com/RpFlo/Fx.Tween.Toggle

Bare bones tween that tracks whether it's toggled in or out, and  
stores the instructions for the toggling.

     http://moodocs.ryanflorence.com/RpFlo/Toggler

Extends Fx.Tween.Toggle by attaching an event to an element to fire  
the toggle method.

Hope that helps!

Ryan Florence

[Writing TextMate Snippets] ( http://blog.flobro.com/ )

On Oct 29, 2009, at 7:51 PM, mmjaeger wrote:

>
> Hello
> I've got two questions - first, I couldn't find any toggle method for
> Fx.Tween - is this correct?
>
> second, I tried the code below - but it drives me nuts -
> this.isCollapsed is always true so I can't get this thing to toggle -
> does anybody spot what's wrong with it?
> Thank you for your input!
>
> var fxTween = new Fx.Tween('streamWidget', {
> duration: 5000,
> onComplete: function() {
> (this.isCollapsed) ? false : true;
> console.log('onComplete: ' + this.isCollapsed);
> }.bind(this)
> });
>
> fxTween.set('height', 0);
> this.isCollapsed = true;
>
> $('btn-info').addEvent('click', function(e){
> if (this.isCollapsed) {
> console.log('1st: ' + this.isCollapsed);
> fxTween.start('height', 0, 250);
> $('btn-info').set('src', './images/info-close.png');
> } else {
> console.log('2st: ' + this.isCollapsed);
> fxTween.start('height', 250, 0);
> $('btn-info').set('src', './images/info-open.png');
> }
> }.bind(this))