I am facing an issue where I want the third1 div to smoothly move inside the third div as it fades in. Unfortunately, due to its absolute position, it is not being positioned correctly. I am also trying to achieve a simultaneous fadeIn and animate effect, but the current code is not yielding the desired result. Any suggestions on how to solve this problem would be greatly appreciated. Please help!
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="animation.js"></script>
<link rel="stylesheet" type="text/css" href="req.css">
</head>
<body>
<div class="one"><button class="b">Click Me!</button></div>
<div class="two"></div>
<div class="three">
<div class="three1 anim" style="position:absolute;"></div>
<div class="three2 anim"></div>
<div class="three3 anim"></div>
</div>
</body>
</html>
The jquery and css codes are as follows:
.one{
height: 100%;
width: 400px;
background: rgb(241, 196, 15);
float:left;
}
.two{
height: 100%;
width: 400px;
background: rgb(230, 126, 34);
float:left;
}
.three{
height: 100%;
width: 400px;
background: rgb(231, 76, 60);
float:left;
}
.three1{
height: 100px;
width: 350px;
margin-left: 25px;
margin-right: 25px;
margin-top:15px;
background: rgb(26, 188, 156);
float:left;
position:absolute;
display:none;
}
.three2{
height: 100px;
width: 350px;
margin-left: 25px;
margin-right: 25px;
margin-top:15px;
background: rgb(46, 204, 113);
float:left;
position:absolute;
display:none;
}
.three3{
height: 100px;
width: 350px;
margin-left: 25px;
margin-right: 25px;
margin-top:15px;
background: rgb(52, 152, 219);
float:left;
position:absolute;
display:none;
}
JQuery:
$(document).ready(function(){
$('.b').click(function(){
$('.anim').fadeIn(2000);
$('.anim').animate({left:'100px'});
});
});