Lamar Lamar - 2 months ago 9
jQuery Question

Inline Block animation issues

I have a row of elements that have some animations associated with them on hover and mouseEnter/mouseLeave. The animations essentially enlarge the elements.

However, there is a problem occurring only on the first mouseEnter/mouseLeave events of each element. The first time each element is entered with the cursor, all of the remaining unentered elements fall out of line.

Again, this only happens on the first pair of events for the elements after page load. After all elements have been entered/left, the animation in the row of elements works as expected.

So far I have tried adjusting some overflow properties of .smallB and bubbleGrid but this usually just makes these elements disappear on page load.

Any help is appreciated!




HTML:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/overflow_problem.css" rel='stylesheet'>
</head>

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src='animation.js'></script>

<div class='container' id="site">

<div class='row' id='main'>

<div class='row bubbleGrid' id="r1">
<div class='container' id="center">

<div class='smallB front'><div class='tdown'><h3>something</h3></div></div>

<div class='smallB front'><div class='tdown'><h3>cubone</h3></div></div>

<div class='smallB front'><div class='tdown'><h3>Other</h3></div></div>
</div>
</div>

</div>
</div>

</body>


CSS:

body, html{
/* background-color: #F5F5DC;*/
height: 100%;
color: #5c5c8a;
}
#site{
width: 980px;
margin: auto;
}

.bubbleGrid{
height: 450px;
width: 100%;
}
.smallB{
height: 150px;
width: 150px;
border-radius: 50%;
display: inline-block;
text-align: center;
margin-left: 80px;
margin-right: 80px;
margin-bottom: 50px;
color: #DAA520;
line-height: 20px;
font-size: 20px;
}
.tdown{
margin-top: 60px;
}
#r1{
height: 140px;
padding-top: 18%;
}
#center{
margin-left: 100px;
overflow: hidden;
}
#r1 .smallB {
background-color: #5C5C8A;
}


Animation:

$(document).ready(function(){


$(function(){
$('.smallB').mouseenter(
function(){
$(this).animate({height: '170px'}, {queue:false});
$(this).animate({width: '170px'}, {queue:false});
});
$('.smallB').mouseleave(
function(){
$(this).animate({height: '150px'}, {queue:false});
$(this).animate({width: '150px'}, {queue:false});
});
});


$(function() {
$(".smallB").hover(
function() {
$(this).css('background-color', '#696969')
}, function() {
$(this).css('background-color', '')
});
});

});

Answer

you need to force remove overflow: hidden; on .smallB

$(document).ready(function(){


    $(function(){
        $('.smallB').mouseenter(
            function(){
                $(this).animate({height: '170px'}, {queue:false});
                $(this).animate({width: '170px'}, {queue:false});
        });
        $('.smallB').mouseleave(
            function(){
                $(this).animate({height: '150px'}, {queue:false});
                $(this).animate({width: '150px'}, {queue:false});
        });
    });


    $(function() {
        $(".smallB").hover(
        function() {
            $(this).css('background-color', '#696969')
        }, function() {
            $(this).css('background-color', '')
        });
    });

});
body, html{
/*  background-color: #F5F5DC;*/
    height: 100%;
    color: #5c5c8a;
}
#site{
    width: 980px;
    margin: auto;
}

.bubbleGrid{
    height: 450px;
    width: 100%;
}
.smallB{
    height: 150px;
    width: 150px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    margin-left: 80px;
    margin-right: 80px;
    margin-bottom: 50px;
    color: #DAA520;
    line-height: 20px;
    font-size: 20px;
  overflow: visible !important;
}
.tdown{
    margin-top: 60px;
}
#r1{
    height: 140px;
    padding-top: 18%;
}
#center{
    margin-left: 100px;
    overflow: hidden;
}
#r1 .smallB {
        background-color: #5C5C8A;
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="css/overflow_problem.css" rel='stylesheet'>
  </head>

  <body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <script type="text/javascript" src='animation.js'></script>

  <div class='container' id="site">  

  <div class='row' id='main'>

          <div class='row bubbleGrid' id="r1">
           <div class='container' id="center">

                <div class='smallB front'><div class='tdown'><h3>something</h3></div></div>

                <div class='smallB front'><div class='tdown'><h3>cubone</h3></div></div>

                <div class='smallB front'><div class='tdown'><h3>Other</h3></div></div>
           </div>
          </div>

  </div>
  </div>

  </body>

Comments