Is there a better way to write this jQuery UI effect animation?

Question

I'm writing some code to perform some simple form validation and I would like to display error messages inside the actual relevant textarea by means of a text fadeout/fadein effect.

To achieve this I am using jQquery UI to do the following:

Step 1: Animate the color to match the background colour
Step 2: Modify the text to show the error message then fade it in
Step 3: Fade the error message out, change the text back to its previous content
Step 4: Fade the text back in
Step 5: Finally, Focus the textarea and put the cursor at the end

This works fine, however to do this I have had to nest a lot of anonymous function which is something I really don't like to do.

Is there a better way of achieving the same effect?

if (replyto == body) { 
    $textarea.prop("disabled", true).animate({ color: 'rgb(41, 41, 41)'},500, function(){
        $textarea.text('Please enter your reply here')
            .animate({ color: 'white'},500, function(){
                $textarea.delay('1000')
                    .animate({ color: 'rgb(41, 41, 41)'},500, function(){
                        $textarea.text(body)
                            .animate({ color: '#a7a7a7'},500)
                            .prop("disabled", false)
                            .focus()
                            .putCursorAtEnd();
                    });
            });
    });
    return false; 
}

Kyle Macey · Accepted Answer · 2012-12-20 19:21:28Z

5

Pull it out to a function?

$.fn.textFadeSwap = function(newText, body, customColor) {
    var $this= $(this), 
        transparentColor = $this.css('background-color') || 'transparent',
        originalColor = $this.css('color') || '#000',
        customColor = customColor || '#000';

    $this.animate({ color: originalColor, 500, function(){              
        $this.text(newText)
            .animate({ color: transparentColor},500, function(){
                $this.delay('1000')
                    .animate({ color: originalColor},500, function(){
                        $(this).text(body)
                            .animate({ color: customColor},500)
                               .focus()
                                  .putCursorAtEnd();
                        });
            });
    });                 
}


if (replyto == body) {
    $('textarea').textFadeSwap("Please enter your reply here", body, '#a7a7a7')
}

edited Dec 20, 2012 at 19:21

answered Jan 19, 2012 at 14:26

Kyle Macey

501 silver badge10 bronze badges

\$\begingroup\$ Thanks for the quick answer kyle, great answer and a good suggestion, i'll definately do just that. Is there any way to achieve the effect withou the serious nesting however? Or would you say it doesn't matter and is the only way to achieve the effect? \$\endgroup\$

user6595
– user6595

2012-01-19 14:31:55 +00:00
Commented Jan 19, 2012 at 14:31
\$\begingroup\$ For what you're working with, the nesting about right... You can kind of hybrid it with the other answer here, if you want. \$\endgroup\$

Kyle Macey
– Kyle Macey

2012-01-19 14:46:43 +00:00
Commented Jan 19, 2012 at 14:46

Add a comment |

PetersenDidIt · Accepted Answer · 2012-01-19 14:43:41Z

10

You could create a function that will set up the animation of text or color and then just call it a few times to set up your animation:

$.fn.animateIt = function(color, text) {
    var that = $(this);
    if (text) {
        that.queue(function(next) {
            that.text(text);
            next();
        });
    }
    if (color) {
        that.animate({
            color: color
        }, 500);
    }
    return that;
};

$textarea.animateIt('rgb(41, 41, 41)')
    .animateIt('#FFF', 'Please enter your reply here')
    .delay('1000')
    .animateIt('rgb(41, 41, 41)')
    .animateIt('#a7a7a7', body)
    .queue(function(next) {
        $textarea.focus().putCursorAtEnd();
        next();
    });

Gets rid of the nested functions.

http://jsfiddle.net/petersendidit/LYsQM/1/

answered Jan 19, 2012 at 14:43

PetersenDidIt

2011 silver badge3 bronze badges

\$\begingroup\$ Thanks mate thats a great solution... I'm going to use a combination of both answers given. I'm going to leave Kyle with the 'answer' however as he beat you to it. Hope you're okay with that. \$\endgroup\$

user6595
– user6595

2012-01-19 14:48:24 +00:00
Commented Jan 19, 2012 at 14:48
1

\$\begingroup\$ +1 - nesting anonymous functions should be on the top list of antipatterns on the first page of any jQuery tutorial. \$\endgroup\$

Lars-Erik
– Lars-Erik

2012-01-19 15:10:07 +00:00
Commented Jan 19, 2012 at 15:10

Add a comment |

Stack Exchange Network

Is there a better way to write this jQuery UI effect animation?

2 Answers 2

You must log in to answer this question.

Hot Network Questions

Is there a better way to write this jQuery UI effect animation?

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions