[CSS] CSS Transitions: Delays and Multiple Properties 

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <h1>Wombat Revealer</h1>
  
  <div class="item one">
    <div class='cover'>
      <span>Reveal Wombat!</span>
    </div>
    <img src="https://c2.staticflickr.com/6/5290/5262975644_bc61d8702d_b.jpg" width=320 />
  </div>
  
  <div class="item two">
    <div class='cover'>
      <span>Reveal Wombat!</span>
    </div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Common_Wombat_(Vombatus_ursinus_tasmaniensis).jpg" width=320 />
  </div>
  
  <div class="item three">
    <div class='cover'>
      <span>Reveal Wombat!</span>
    </div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Vombatus_ursinus_-Maria_Island_National_Park.jpg/1024px-Vombatus_ursinus_-Maria_Island_National_Park.jpg" width=320 />
  </div>
</body>
</html>

 

.item .cover {
  width: 320px;
  height: 213px;
  background-color: yellow;
  position: absolute;
  transition: opacity 500ms 200ms,
    transform 500ms;
}

.item .cover.open {
  opacity: 0;
  transform: rotate(180deg);
}

 

jQuery('.cover').click(function(e) {
  var target = jQuery(e.currentTarget);
  target.toggleClass('open');
});

 

posted @ 2016-03-04 15:50  Zhentiw  阅读(194)  评论(0)    收藏  举报