Question

我有一行元素在hover和mouseEnter / mouseLeave上有一些与之关联的动画。动画基本上扩大了元素。

但是，仅在每个元素的第一个mouseEnter / mouseLeave事件上发生问题。第一次使用光标输入每个元素时，所有剩余的未输入元素都会脱离行。

同样，这只发生在页面加载后元素的第一对事件上。输入/离开所有元素后，元素行中的动画按预期工作。

到目前为止，我已经尝试调整.smallB和bubbleGrid的一些溢出属性，但这通常只会使这些元素在页面加载时消失。

感谢任何帮助！

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;
}

动画：

$(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 1

你需要强行删除溢出：隐藏;在.smallB

＆＃13;

$(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', '')
        });
    });

});

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 2

如果您只是更改样式，那么我建议使用CSS :hover伪类，它的表现要好得多。只需将其添加到CSS并完全删除javascript：

.smallB { 
  transition: all 0.5s; 
}
.smallB:hover {
  height:170px;
  width:170px;
}
#r1 .smallB:hover {
  background-color: #696969;
}

＆＃13;

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;
}

.smallB { 
  transition: all 0.5s; 
}
.smallB:hover {
  height:170px;
  width:170px;
}
#r1 .smallB:hover {
  background-color: #696969;
}

＆＃13;

<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>

</html>

＆＃13;

内联块动画问题

2 个答案: