✏️ Explanatory Question
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.
<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>
Functions which need to be utilized.
function hover1(){
};
function hover2(){
};
function animate_big(){
};
function animate_small(){
};
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"});
};