Skip to main content

SIMPLE JQUERY ANIMATION

Multi move jquery Animation

SIMPLAE JQUERY ANIMATION WITH MULTIDIRECTIONAL

HTML

Copy HTML code save as index.html
SAve css code save as style.css


<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Slider</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style/newcss.css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 
  $("#btn1").click(function(){
     $("#one").animate({width:'1080px',height:'500px'},600);
    $("#two").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#three").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#four").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#five").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#six").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#seven").animate({width:'0px',height:'0px',left:'1214px'},600);
    $("#btn1").hide();
    $("#btn2").show();
    $("#btn3").hide();
    $("#btn4").hide();
    $("#btn5").hide();
    $("#btn6").hide();
    $("#btn7").hide();
  });
  $("#btn2").click(function(){
  $("#btn1").hide();
    $("#btn2").hide();
    $("#btn3").show();
    $("#btn4").hide();
    $("#btn5").hide();
    $("#btn6").hide();
    $("#btn7").hide();
     $("#one").animate({width:'0px',height:'0px',left:'1214px',top:'500px'},600);
    $("#two").animate({width:'1080px',height:'500px'},600);
    $("#three").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#four").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#five").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#six").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#seven").animate({width:'0px',height:'500px',left:'135px'},600);
    });
    $("#btn3").click(function(){
  $("#btn1").hide();
    $("#btn2").hide();
    $("#btn3").hide();
    $("#btn4").show();
    $("#btn5").hide();
    $("#btn6").hide();
    $("#btn7").hide();
     $("#one").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#two").animate({width:'0px',height:'0px',left:'1214px',top:'0px'},600);
    $("#three").animate({width:'1080px',height:'500px'},600);
    $("#four").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#five").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#six").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#seven").animate({width:'0px',height:'500px',left:'135px'},600);
    });
      $("#btn4").click(function(){
  $("#btn1").hide();
    $("#btn2").hide();
    $("#btn3").hide();
    $("#btn4").hide();
    $("#btn5").show();
    $("#btn6").hide();
    $("#btn7").hide();
     $("#one").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#two").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#three").animate({width:'0px',height:'0px',left:'607px',top:'500px'},600);
    $("#four").animate({width:'1080px',height:'500px'},600);
    $("#five").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#six").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#seven").animate({width:'0px',height:'500px',left:'135px'},600);
    });
        $("#btn5").click(function(){
  $("#btn1").hide();
    $("#btn2").hide();
    $("#btn3").hide();
    $("#btn4").hide();
    $("#btn5").hide();
    $("#btn6").show();
    $("#btn7").hide();
     $("#one").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#two").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#three").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#four").animate({width:'0px',height:'500px',left:'1214px'},600);
    $("#five").animate({width:'1080px',height:'500px'},600);
    $("#six").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#seven").animate({width:'0px',height:'500px',left:'135px'},600);
    });
          $("#btn6").click(function(){
  $("#btn1").hide();
    $("#btn2").hide();
    $("#btn3").hide();
    $("#btn4").hide();
    $("#btn5").hide();
    $("#btn6").hide();
    $("#btn7").show();
     $("#one").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#two").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#three").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#four").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#five").animate({width:'0px',height:'500px',left:'1214px'},600);
    $("#six").animate({width:'1080px',height:'500px'},600);
    $("#seven").animate({width:'0px',height:'500px',left:'135px'},600);
    });
            $("#btn7").click(function(){
  $("#btn1").show();
    $("#btn2").hide();
    $("#btn3").hide();
    $("#btn4").hide();
    $("#btn5").hide();
    $("#btn6").hide();
    $("#btn7").hide();
    $("#one").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#two").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#three").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#four").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#five").animate({width:'0px',height:'500px',left:'135px'},600);
    $("#six").animate({width:'0px',height:'500px',left:'1214px'},600);
    $("#seven").animate({width:'1080px',height:'500px'},600);
    });
});
</script>
    </head>
    <body>
         <button id="btn7">seven</button>
                   <button id="btn6">six</button>
                   <button id="btn5">five</button>
                    <button id="btn4">four</button>
                    <button id="btn3">three</button>
                      <button id="btn2">two</button>
                      <button id="btn1">one</button>
        <div id="cover">
            <div id="one"></div>
            <div id="two"></div>
            <div id="three"></div>
            <div id="four"></div>
            <div id="five"></div>
            <div id="six"></div>
            <div id="seven"></div>
        </div>
                      <script>
                          do {
   s += 1;
   document.write(s);
} while (s < 5);
                      </script>
    </body>
</html>

CSS



body, h2, p {
    margin: 0;
    padding: 0;
    color: white;
}

body {
    background-color: #444;
 
    font-family: Helvetica, sans-serif;
}

canvas {
    background-color: #e2e2e2;
    margin: 20px;
}

td {
    padding: 5px;
}
input[type=range]::before {
    content: attr(min);
}
input[type=range]::after {
    content: attr(max);
}


Labels:

Comments

Post a Comment

Popular posts from this blog

Wo-commerce sidebar navigation

There is Plus Minus Image you can change it in your own code
Post a Comment
Read more

How to add attribute in input type onload

Add this script this will target your input type submit and set an attribute on it when page load. <script> function functionAddAttribute(){     $("input:submit").attr("accesskey","g"); }; window.onload = functionAddAttribute; </script> <noscript>Your browser does not support JavaScript!</noscript> This is html <input type="submit" value="this is button" />
Post a Comment
Read more

HOW TO IMPLEMENT ADAPTIVE IMAGE IN WORDPRESS

If you don't know about Adaptive image please Read my last artical. STEP:1 COPY .htaccess , Adaptive-image.php, ai-cookie.php, DS_Store file in your root directory STEP 2: CREATE folder in wp-contant/uploads/adaptive/ai-cache if .htaccess file already exist then pest this code in it but be carefull take its backup CODE #START Adaptive-Images #Add any directories you wish to omit from the Adaptive-Images process on a new line. #Omit plugins, wp-includes and wp-admin content. RewriteCond %{REQUEST_URI} !wp-content/plugins RewriteCond %{REQUEST_URI} !wp-includes RewriteCond %{REQUEST_URI} !wp-admin #Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories #to adaptive-images.php so we can select appropriately sized versions RewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php #END Adaptive-Images UNDER # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On STEP3: Open Adaptive-image.php change with it $cache_path    = "wp-content/upl...
Post a Comment
Read more