ASHMIL HUSSAIN K ASHMIL HUSSAIN K - 6 months ago 11
CSS Question

I want to do a Web Slide Transaction

How can I create a slide transaction for a web page using Cascading Style Sheet and java script?

Answer

jQuery is the easiest with flash but with keyframes in css3 with no flash are your choices.

Example code :

<html>
<head><title>Slide transaction</title><head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(window).ready(function(){
$("#btn").click(function(){
 $(".slide1").animate({
  width : 'toggle'
 },1000,function () { $(".slide2").animate({
  width : 'toggle'
 },1000);});
 });
 });
 </script>
 <style>
 .slide1 {
  background-color : yellowgreen;
  width:100%;
  height : 250px;
  display : block;
  }
  .slide2 {
  background-color : darkblue;
  width : 100%;
  height : 250px;
  display: none;
  }
  </style>
  <body>
  <div class="slide1">
  This is slide 1.
  </div>
  <div class="slide2">
  This is slide 2
   </div>
   <input type="button" id="btn" value="Click Me!" style="position:absolute;top:400px;"/>
   </body>
   </html>