I have a div that smoothly slides out when a label is hovered over.
HTML:
<div class="cellDataViewTdmStatus divCell userSitesCol7">
<label class="lblViewTdmStatus">View Status</label>
</div>
<div id="tdmStatus" class="hidden flyout">
LOREM IPSUM DOLOR SIT AMET<br>
Blah blah blah
</div>
This is how the label's div appears on the page (notice the "View Status" text on the right, which matches the label in the code above):
CSS:
.hidden { display: none; }
.flyout {
width: 560px;
height: 56px;
background-color: #EFF7DF;
padding: 10px;
margin: 0;
border-radius: 10px;
border: solid 1px #CC6600;
position: fixed;
overflow: hidden;
z-index: 10000;
top: 100px;
right: 300px; }
JS:
$('.lblViewTdmStatus').hover(function() {
$('.flyout').toggle("slide", {direction:'right'});
});
The slide effect works perfectly as intended by sliding out from the hidden state when hovering over the label.
To enhance the animation, I aim for the div to look like it is emerging from the border to the left of the "View Status" label.
In addition, this table contains rows with labels to hover over, so it is crucial for the sliding div to appear to the left of the clicked label.