jQuery 4 Hands-on - Animations

jQuery >   jQuery Tutorial >   jQuery Animation  

Long Question

173

Answer:

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"});
};

This Particular section is dedicated to Question & Answer only. If you want learn more about jQuery. Then you can visit below links to get more depth on this subject.


Join Our telegram group to ask Questions

Click below button to join our groups.

Ask Question - CSE
Programming Language - PDF