I've been experimenting with creating an information tag that slides out from behind a circular picture. To achieve this effect, I created a block and circle to serve as the information field placed behind the image.
However, I'm facing a challenge in making it slide out smoothly. Due to having two div elements, the square slides out first followed by the circle, resulting in a choppy transition.
My goal is to make it toggle in and out seamlessly, appearing as one cohesive object.
$(document).ready(function(){
$('.employeeBlock').hide();
$('.employeeDot').hide();
$('.employee').click(function(){
$('.employeeDot').toggle('slide');
$('.employeeBlock').toggle('slide');
});
I've attempted placing the employeeDot inside the employeeBlock within the employee div, as well as keeping them separate but within the employee div.
Both methods yield similar outcomes.
Thank you
EDIT: Thank you for the suggestions. The animation is smoother now, but there's still room for improvement. I believe I need to create a unified item with a bullet-like shape, toggling it in and out. Any thoughts on how to accomplish this?
The best I can achieve currently is a pill shape, which leaves some areas uncovered.
EDIT: Below is my HTML structure:
<body>
<div class='employee'>
<div class='employeeDot'></div>
<div class='employeeBlock'></div>
<img class='pic' src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQfMDb1Qtu7gTDZTfnFR2XcPqrfkn27zeWASTBfczi-GGQAIKG_"/>
</div>
</body>
</html>
And here is my CSS:
.pic { height: 150px; width: 150px; border-radius: 75px; position: absolute; }
.employeeBlock {
background-color: maroon;
height: 150px;
width: 150px;
position: absolute;
left: 75px;
float: left;
}
}
.employeeDot {
background-color: maroon;
height: 150px;
width: 250px;
border-radius: 150px;
position: absolute;
float: left;
left: 75px;
}
}