theStress theStress - 28 days ago 11
CSS Question

how to stop my cell from resizing when jQuery anime effect begin?

I have code a 2x2 DIV table and i want the left side of the cell appear when

mouseover
right cell and the left cell will be hidden when
mouseleave
the right cell using jQuery animate effect.

However, I notice my right cell has a bounce effect or resize whenever the animate effect start. can anyone advise me how prevent my right cell from 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

Answer

You need to give overflow: hidden; for stop bounce of left border of right element.

$(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"
    });
  });
  
});
body 
{
margin: 0; 
padding: 0; 
font-size: 100%; 
font-family: Arial, Helvetica, sans-serif;
}
.divTable {
	margin-top: 100px;
}
.divTableRow {
	margin: 0;
	padding: 0;
    height: 55px;
}
.divTable {
width: 100%;
text-align: right;

}
.divTableCell2 img {
	height: 55px;
	width: 70px;
    padding: 5px 10px;
}
.in_l {
	display: inline-block;

}
.divTableCell2 {
	background-color: dodgerblue;
	cursor: pointer;
		overflow: hidden;

}
.divTableCell1 {
	width: 100px;
    height: 55px;
    background: red;
    margin: 0 -4px 0 0;
   line-height: 6rem;
       padding-left: 10px;
	text-align: left;
	overflow: hidden;
	opacity:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

			<div class="divTable">
			  <div class="divTableBody">

				<div class="divTableRow">
				  <div class="divTableCell1 in_l">This is Menu 1</div>

				  <div id="top" class="divTableCell2 in_l">
					<img src="http://i.imgur.com/ILEhfiz.png" />
				  </div>
				</div>

				<div class="divTableRow">
				  <div class="divTableCell1 in_l">This is Menu 2</div>

				  <div id="bottom" class="divTableCell2 in_l">
					<img src="http://i.imgur.com/8IQhev1.png" />
				  </div>
				</div>

			  </div>
			</div>

Comments