Question

代码可以在http://codepen.io/kongakong/pen/wMQrBR

找到

的Javascript ：

$(document).ready(function () {
  init();
});

function init() {
  $('#test').on('click', function () {
        $('.answer').animate({width: "hide"}, 1000, 'swing');

    });
}

CSS ：

.row {
  position: relative;
  overflow-x: hidden;
}

.hidden {
  display: none;
}


.answer {
  font-size: 40px;
  color: red;
  width:100%;

  opacity: 1;
  z-index: 100;
  border: 1px solid red;
  text-align: center;
  background-color: #fff;
}

.answer-new {
  font-size: 40px;
  /* to make answer-new on top and cover answer */
  position: absolute;
   border: 1px solid blue;
   width: 100%;
  z-index: 1;
  text-align: center;
}

HTML

<div class="contrainer">
  <div>
    <input id='test' type='button' value="test"></input>
  </div>

  <div class="row">
    <div class="answer-new">Under

    </div>
    <div class="answer">Top
    </div>
  </div>
  <div class="row">
    <div class="answer-new">Under1

    </div>
    <div class="answer">Top1
    </div>
  </div>

</div>

以下是动画开始前页面的屏幕截图

单击该按钮时，将按预期执行动画。我希望css类answer-new的div保持可见。然而最后所有的div都消失了。

我尝试使用＆＃39; 0＆＃39;而不是隐藏＆＃39;在这种情况下，div answer的文本保持可见。没有完全隐藏。

为什么会出现这种情况？

Answer 1

这是因为您的.row div有overflow-x: hidden;，当.answer div宽度被隐藏时，除了.answer-new之外没有任何div。

并且.answer-new是position:absolute因此，它不计算宽度/高度。它会隐藏.row的所有元素溢出。

要。让它工作添加填充到.row因此，它会计算一些间距。

在示例中我喜欢她添加padding: 25px 0;。我已经给绝对div最高价了。 top: 0;给予它的立场。

并将margin: -25px 0;添加到.answer，以便在填充添加到父div时从顶部显示正确的内容。

<强> CSS：

.row {
  position: relative;
  overflow-x: hidden;
   padding: 25px 0;
}

.hidden {
  display: none;
}

.answer {
  font-size: 40px;
  color: red;
  width:100%;

  opacity: 1;
  z-index: 100;
  border: 1px solid red;
  text-align: center;
  background-color: #fff;
  margin: -25px 0;
}

.answer-new {
  font-size: 40px;
  /* to make answer-new on top and cover answer */
  position: absolute;
   border: 1px solid blue;
   width: 100%;
  z-index: 1;
  text-align: center;
  top:0;
}

<强> Working Fiddle

Answer 2

这是因为您的容器div .row没有自己的尺寸（宽度或高度），而另一个子div .answer-row具有绝对定位且仅具有宽度尺寸。因此，当子div .answer被隐藏时，父级会丢失其高度维度，并且实际上变得不可见。

如果您给父级div .row一个高度，当子div .answer被隐藏时，父级保持可见。因此，考虑到其风格，另一个孩子.answer-row仍然可见。

See this fiddle其中我将高度添加到.row。

Answer 3

虽然我自己无法准确解释这种行为，但我冒昧地将宽度限制为1像素，并消除了解决问题的不透明度

import javax.swing.JFrame;

public class FrameViewer {
    JFrame frame;
    public void createFrame()
    {
        frame = new JFrame("CLOCK");
        frame.setSize(600, 600);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        //add box and ellipse on the Frame
        ClockComponent component = new ClockComponent();
        frame.add(component);

        frame.setVisible(true);
    }
}

Updated Fork

Answer 4

希望这会对你有所帮助，我使用了在线jquery。

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">


<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  
<style type="text/css">
	.row {
  position: relative;
  overflow-x: hidden;
}

.hidden {
  display: none;
}


.answer {
  font-size: 40px;
  color: red;
  width:100%;

  opacity: 1;
  z-index: 100;
  border: 1px solid red;
  text-align: center;
  background-color: #fff;
}

.answer-new {
  font-size: 40px;
  /* to make answer-new on top and cover answer */
  position: absolute;
   border: 1px solid blue;
   width: 100%;
  z-index: 1;
  text-align: center;
}
</style>


<body>

 <div class="container">
  <div>
    <input class="btn btn-default" id='test' type='button' value="test"></input>
  </div>

  <div class="row">
    <div class="answer-new">Under

    </div>
    <div class="answer">Top
    </div>
  </div>
  <div class="row">
    <div class="answer-new">Under1

    </div>
    <div class="answer">Top1
    </div>
  </div>

</div>
  
  <script type="text/javascript">
    $(document).ready(function(){
    	$("#test").click(function(){
    		$(".answer").animate({width:0,opacity:0},1000);
    	});
    });
  </script>

</body>
</html>

＆＃13;

Answer 5

恕我直言我不喜欢用jquery / js来动画事物，我会用css类来做

.answer {
  font-size: 40px;
  color: red;
  width:100%;

  opacity: 1;
  z-index: 100;
  border: 1px solid red;
  text-align: center;
  background-color: #fff;

  transition: 0.5s;
  overflow: hidden;
}

.answer.minimized{
  width: 0px;
}

在你的js中

$('#test').on('click', function () {
    $('.answer').addClass('minimized');
});

这是demo

为什么动画功能会在动画结束时隐藏另一个div？

5 个答案: