CODEWITHSUNDEEP
jqueryjquery-animate
Phillip Senn
Phillip Senn

Reputation: 47625

Flipping a card horizontally (keeping the height at 100%)

National Geographic has this great little JavaScript game that includes sound and animation. In looking at the source code, I thought they were flipping the card by doing an animate {width:0%} followed by an animate {width:100%}, but my animation looks different than theirs:

$(document).on('click','img',clicked)

function clicked() {
  $(this).animate({width:'0%'})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://images.nationalgeographic.com/wpf/media-content/richmedia/0/629/project/memory/images/card_back_hard.png">

Q: How do you I get the card to flip horizontally rather than shrink to 0%?

Upvotes: 1

Views: 45

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337580

If only one dimension of an img is specified then the value is applied to all dimensions to maintain the aspect ratio.

If you want to retain the height, set it to its initial value. 

$(document).on('click', 'img', clicked)

function clicked() {
  $(this).animate({
    width: '0%',
    height: $(this).height()
  })
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://images.nationalgeographic.com/wpf/media-content/richmedia/0/629/project/memory/images/card_back_hard.png">

Upvotes: 1

Related Questions