jQuery button animation sequence

Question

I've a simple problem with animation my button. I can't figure it out since I'm a beginner in jQuery (keep this in mind).

Please visit www.lionwebmedia.com and navigate to buttons which are under each project, now hover it. You should notice that the animation isn't quite right. The button width is expanding but with text change (no delay) and we get ugly effect of letters coming in from the bottom expanding button height.

This screen will help you understand what i mean and how i want to solve this.

And here is jsfiddle of my code

I would appreciate any help. Thanks!

Answer 1

First up

I'll refer you to JQuery Animate documentation.
More specifically, take a look at how they make animation queues.

$('#clickme').click(function() {
  $('#book').animate({
    width: 'toggle',
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });
});

When the animation is complete, is where you want to add the text.

---

Solution

Here is a JSFiddle of a working solution.

$('.projectContact').mouseenter(function() {
        $(this).animate({
            width: "95px"
        }, 250, function(){
               $(this).text('Request a quote')
        });
}).mouseleave(function(){
    $(this).animate({
        width: "16px"
    }, 250, function(){
        $(this).html("<img src=\"images/mail.png\">");
    });
});

I used mouseenter and mouseleave because they are not just more reliable, but also easier to read. As you can see, the last function parameter (animation complete) in the .animate is where you'll want the change to occur.

Also, you can add this to the style properties for the element, where you basically force the text to stay on one line, and hide everything that goes outside of bounds. This way, when you animate, the text won't affect the container.
CSS:

.myButton{
    white-space: nowrap;
    overflow: hidden;
}

What you also could do, is make a class that contain the CSS, and then add/remove at the start/end of each animation, if you don't want the CSS to interfere with the rest of your CSS.

---

Final solution

Alright, here is the final solution, with fades and everything. It's not complete, but you get the picture.

var current_element = "img";

$('.projectContact').mouseenter(function() {
        var par = $(this);
        $('.projectContact '+current_element).animate({
            opacity: 0
        }, 250, function(){
            par.animate({
                width: "95px"
            }, 250, function(){
                par.html('<div>Request a quote</div>');
                current_element = "div";
            });
        });
        inside = true;
}).mouseleave(function(){
    var par = $(this);
        $('.projectContact '+current_element).animate({
            opacity: 0
        }, 250, function(){
            par.animate({
                width: "16px"
            }, 250, function(){
                par.html('<img src="http://www.hager.se/icons/icon_mail.gif">');
                current_element = "img";
            });
        });
});

You can mess around with the animation times, but that is basically how you do it. I had to add a "div" to your "Request a quote" text, in order to be able to animate it individually. This way, you can play with it's opacity as well.

Good luck!

---

Alternative solution

Here's a different approach where you edit the text/image of the element the instant you begin animating. This is the method you're currently using. Note that the CSS white-space: nowrap; is required for this to work without making the animation "ugly".

$('.projectContact').mouseenter(function() {
        $(this).animate({
            width: "95px"
        }, 250).text('Request a quote');
}).mouseleave(function(){
    $(this).animate({
        width: "16px"
    }, 250).html("<img src=\"images/mail.png\">");
});

---

Finishing thoughts

It would be good practice to use .clearQueue, so that your animations don't begin to pile up. It resets the animation queue and stops the animation, so, in this case, if the user quickly hovers in and out, the animation will proceed directly to the mouseleave animation.
This is also particularly useful when a user for instance hovers in and out of the element twice or more, before the first animation sequence is complete, it prevents animation pileups.

See it in use

$('.projectContact').mouseenter(function() {
        $(this).animate({
            width: "95px"
        }, 250).text('Request a quote').clearQueue();
}).mouseleave(function(){
    $(this).animate({
        width: "16px"
    }, 250).html("<img src=\"images/mail.png\">").clearQueue();
});

Alternatively you can use .stop, which does the same thing, but only for the current animation, not the entire animation queue.

Answer 2

You can try the following code

$('.projectContact').mouseover(

function() {
    $('.projectContact').animate({'width': '95px'}, 250, function () { $(this).text('Request a quote') });

});


$('.projectContact').mouseleave(function() {
    $(this).html('');
    $('.projectContact').animate({'width': '16px'}, 250, function () {
    $(this).html('<img src="images/mail.png">')  } );
});