CODEWITHSUNDEEP
jqueryshow
Petran
Petran

Reputation: 8047

Scale centered image with jquery

I have a centered image and I want to scale it with jquery. The problem is that it scales first and positioned on a second step. 

.outer {
   width:500px;
   height:500px;
   background: #f5f5f5;
   text-align: center;
}
#inner {
    display: none;
}

http://jsfiddle.net/omudeaxd/

Upvotes: 0

Views: 52

Answers (2)

Bram Vanroy
Bram Vanroy

Reputation: 28437

Why not use keyframes for this? Looks nice, and is hardware accelerated!

http://jsfiddle.net/BramVanroy/omudeaxd/2/

#inner {
    width: 0;
    height: 0;
    animation: zoom 1900ms;
}
@keyframes zoom {
  0% {
      width: 0;
      height: 0;
    }
  100% {
      width: 300px;
      height: 300px;
  }
}

Upvotes: 0

dsharew
dsharew

Reputation: 10665

Use animate() instead of show():

Just replace your js with this:

$( document ).ready (function () {
    $('#inner').css({'height':0,'width':0})
    $('#inner').animate({height:300+"px",width:300+"px"},1900)
});

check in jsfiddle

Upvotes: 2

Related Questions