CODEWITHSUNDEEP
jqueryhtmlcssanimation
jumbopap
jumbopap

Reputation: 4137

jQuery animate font-size decrease: animate shrinking from all sides

I have a simple jsFiddle here where pos2 takes the css from pos1 and animates a transition to overlay pos2 over pos1. http://jsfiddle.net/4beEM/4/

As you can see, when clicked, pos2 shrinks to the upper left. Instead I would like the text to shrink on all sides, into the center. How is this possible with the code below? 

var $pos1 = $('#pos1'),
$pos2 = $('#pos2'),
pos1Css = {
    position : {'top': $pos1.offset().top + "px",
                'left': $pos1.offset().left + "px"},
    fontSize: {'font-size': $pos1.css('font-size')}
}

$pos2.click(function() {
    $(this).animate(pos1Css.fontSize, 1000)
        .delay(100)
        .animate(pos1Css.position, 1000)
})

Upvotes: 2

Views: 1496

Answers (1)

Josh Powell
Josh Powell

Reputation: 6297

I ended up changing the .animate to .css with the use of css transitions.

(Could be done ether way but I'm not a pro with .animate)

The way CSS3 Transitions work is they allow the change to ease in, out, or both.

This line is for webkit based browsers and I'll break it down for you:

-webkit-transition: 1s ease;

You will need to use webkit, moz, ms, and o for the various browser out there.

The 1s is the time frame that you want the transition to take so for this example it will ease the element for 1 second until the transition is complete.

The ease is straight forward in the way of targeting what type of transition you need. You can also use ease-in-out and a lot of different ones.

CSS3 Transition

What I changed in your fiddle

/* I added this to pos2 to allow easing from the change with jQuery */
-webkit-transition: 1s ease;
-moz-transition: 1s ease;
-ms-transition: 1s ease;
-o-transition: 1s ease;

jQuery

$pos2.click(function() {
  $(this).css(pos1Css.fontSize, 1000)
      .delay(100)
      .css(pos1Css.position, 1000);
});

I changed it from .animate to .css because I wanted to target the css directly with the use of CSS3 easing to achieve a smoother and more desired result. Animate seems to do the scroll up to corner animation as a default.

JSFIDDLE

Upvotes: 2

Related Questions