jQuery 4 Hands-on - Animations

Fill In The Blank
Views 219

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

Related Articles:

This section is dedicated exclusively to Questions & Answers. For an in-depth exploration of jQuery, click the links and dive deeper into this subject.

Go to Question List

Join Our telegram group to ask Questions

Click below button to join our groups.

Ask Question - CSE
Programming Language - PDF