jQuery Animation

Rumman Ansari   Software Engineer   2023-03-23   234 Share
☰ Table of Contents

Table of Content:

1. jQuery 4 Hands-on - Animations

In function hover1(), add slideToggle() actions to the div tags ID #item1-des.

In function hover2(), add slideToggle() actions to the div tags ID #item2-des.

In function animate_big(), add the animate() action to the button ID #buy, which will change the width to 200px.

In function animate_small(), add the animate() action to the button ID #buy, which will change the width to 100px.

Solutions

index.html 

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">  
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="index.js"></script>
   
</head>

<body>
    <div class="topnav">
        <a href="#" style="float:right;font-size:20px"><i>Check out</i></a>
        <a href="#" style="float:right; font-size:20px"><i>Sign In</i></a>
        <a href="#/Home" style="float:left; width:150px;" class="active"><b><i>Pick2get</i></b></a>

    </div>
    <br />
    
    <br />
   
    <div class="product_box" id="item1" onmouseover="hover1()">
        <div class="single_1">
            <div class="container">        
                <img src="img/dummy_product.jpg" />
            </div>
        </div>
        <div class="single_2">
            <div class="prod_desc">                
                <div class="pdt_details_2_col">
                    <span class="brand">Brand</span>
                </div>
                <div class="pdt_details_2_col">
                    <span class="brand">Price</span>               
                </div>
            </div>


        </div>
        <div class="single_3">
            <div class="quantity_sec">
                <label>Quantity</label>
                <br>
               <input placeholder="Quantity" type="number">
            </div>
        </div>
        <div class="single_4">
      
        <input type="image" src="img/orangeCart.png" alt="Submit" width="48" height="48"/>            
        </div>        
    </div>
    <div id="item1-des" class="des">
            Some Description 1
    </div>

     <div class="product_box" id="item2" onmouseover="hover2()">
        <div class="single_1">
            <div class="container">
        
                <img src="img/dummy_product.jpg" />
            </div>

        </div>
        <div class="single_2">
            <div class="prod_desc">
                
                <div class="pdt_details_2_col">
                    <span class="brand">Brand</span>                   
                </div>
                <div class="pdt_details_2_col">
                    <span class="brand">Price</span>
                    
                </div>
            </div>


        </div>
        <div class="single_3">
            <div class="quantity_sec">
                <label>Quantity</label>
                <br>
               <input placeholder="Quantity" type="number">
            </div>
        </div>
        <div class="single_4">
        
        <input type="image" id="img2" src="img/orangeCart.png" alt="Submit" width="48" height="48"/>
            
        </div>

    </div>
    <div id="item2-des" class="des">
            Some Description 2
    </div>
    <br />

       <button class="buy" id="buy" onmouseover="animate_big()" onmouseout="animate_small()">BUY</button>

  

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>
script.js

Functions which need to be utilized. 


function hover1(){
  
};
function hover2(){
  
};
function animate_big(){
  
};
function animate_small(){
  
};
script.js

Here's the updated code with the slideToggle() actions in the hover1() and hover2() functions, and the animate() action in animate_big() and animate_small(): 


function hover1(){
  $("#item1-des").slideToggle();
};

function hover2(){
  $("#item2-des").slideToggle();
};

function animate_big(){
  $("#buy").animate({width: "200px"});
};

function animate_small(){
  $("#buy").animate({width: "100px"});
};
‹ Previous not possible this is first one.
Next › -   jQuery Animation Effects