Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="flat transi">
  <div class="item bg1"></div>
  <div class="item bg1"></div>
  <div class="item bg3"></div>
  <div class="item bg4"></div>
</div>
  <input id="btn" type="button" value="run" />
</body>
</html>
 
* {
  margin:0;
  padding:0;
}
​
.transi {
  transition:all .5s ease;
}
​
.flat {
  width:3000px;
  height:100px;
  background: #f00;
  transform:translate3d(0px, 0px, 0px); 
}
.item {
  float:left;
  width:25%;
  height:100%;
}
​
.bg1 {
  background: #eaeaea;
}
​
.bg2 {
  background: pink;
}
​
.bg3 {
  background: green;
}
​
.bg4 {
  background: yellow;
}
 
$(function() {
  var fl = $('.flat')[0],
      btn = $('#btn');
 
  btn.on('click', function() {
    fl.style.transition = 'none';
    fl.style.transform = 'translate3d('+ (-750) + 'px, 0px, 0px)';
    setTimeout(function() {
      fl.style.transition = 'all .5s ease';
    fl.style.transform = 'translate3d('+ (-1500) + 'px, 0px, 0px)';
    }, 0);
    
    
  });
  
  
  
});
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers