After coding a 2x2 DIV table, I encountered an issue where the left side of the cell appears when hovering over the right cell. However, the left cell is hidden when the mouse leaves the right cell, utilizing a jQuery animate effect.
I'm facing a problem with my right cell having a bounce effect or resizing whenever the animation starts. Can anyone provide advice on how to prevent this resizing?
$(document).ready(function () {
$('#top, #bottom')
.mouseover(function () {
$('.divTableCell1').stop(true, false).animate({
width: "300px",
opacity: "1"
});
})
.mouseleave(function () {
$('.divTableCell1').stop(true, false).animate({
width: "100px",
opacity: "0"
});
});
});.divTable {
display: table;
float: right;
}
.divTableRow {
display: table-row;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell1, .divTableHead, .divTableCell2 {
/*border: 1px solid #999999;*/
display: table-cell;
padding: 3px 10px;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
.divTableCell1 {
vertical-align: middle;
opacity: 0;
background-color: red;
}
.divTableCell2 {
width: 30px;
background-color: dodgerblue;
}
.divTableCell2 img {
width: 30px;
height: 30px;
display: block;
margin-left: auto;
margin-right: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell1">This is Menu 1</div>
<div id="top" class="divTableCell2">
<img src="img/alert.png" />
</div>
</div>
<div class="divTableRow">
<div class="divTableCell1">This is Menu 2</div>
<div id="bottom" class="divTableCell2">
<img src="img/setting.png" />
</div>
</div>
</div>
</div>Thanks