Question

我在小提琴中制作了一种带有三个扩展div（#a，#b，#c）的手风琴，但是当我在本地保存并在浏览器中打开它时过渡不再平稳。点击#b并展开#a后，我特别注意到了。我已经包含了引用CSS和JavaScript代码的HTML。原因是什么，解决它的最佳方法是什么？

<head>
     <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
     <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="wrapper">
        <div class="outer">
            <div class="middle">
                <div class="inner" id="a">1</div> 
                <div class="inner" id="b">2</div> 
                <div class="inner" id="c">3</div> 
            </div>
        </div>
    </div>
    <script src="accordion.js"></script>
</body>

以下是小提琴的链接：http://jsfiddle.net/tJugd/3794/

似乎只有在展开#a并点击#b或#c或展开#b并点击#c时才会发生这种情况。< / p>

Answer 1

尝试将单click个事件处理程序用于.animate() easings属性设置为"linear"，css transition效果的动画，设置{ {1}} width个元素{1}} .middle div

＆＃13;

33%

＆＃13;

$(".middle div").click(function() {

  $(this).siblings().animate({
    width: "10%",
    opacity: 0.6
  }, 0, "linear");
 
  $(this).animate({
    width: "80%",
    opacity: 1
  }, 0, "linear");
  
});

＆＃13;

div.inner {
  max-width: 0;
  display: table-cell;
  overflow: hidden;
}
div.outer {
  display: table;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
div.middle {
  display: table-row;
  overflow: hidden;
}
#holder {
  width: 100%;
  height: 100%;
  margin: 0px auto;
  overflow: hidden;
  position: fixed;
}
#a {
  width: 33%;
  height: 100%;
  background-color: red;
}
#b {
  width: 33%;
  height: 100%;
  background-color: blue;
}
#c {
  width: 33%;
  height: 100%;
  background-color: green;
}
.wrapper {
  height: 90vh;
  overflow: hidden;
}
#a,
#b,
#c {
  transition: width 500ms, opacity 500ms;
}

＆＃13;

jsfiddle http://jsfiddle.net/tJugd/3798/

Answer 2

试试这个

＆＃13;

window.onload = function() {
    [].forEach.call(document.querySelectorAll('.inner'), function(el) {
      el.addEventListener('click', function(e) {
        this.parentElement.className = 'middle ' + this.id;
      });
    });

  } //]]>

＆＃13;

div.inner {
  max-width: 0;
  display: table-cell;
  overflow: hidden;
}
div.outer {
  display: table;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
div.middle {
  display: table-row;
  overflow: hidden;
}
#holder {
  width: 100%;
  height: 100%;
  margin: 0px auto;
  overflow: hidden;
  position: fixed;
}
#a {
  height: 100%;
  background-color: red;
}
#b {
  height: 100%;
  background-color: blue;
}
#c {
  height: 100%;
  background-color: green;
}
#a,
#b,
#c {
  width: 10%;
  opacity: 0.6;
  transition: all 3000ms;
}
.middle.a #a,
.middle.b #b,
.middle.c #c {
  width: 80%;
  opacity: 1;
}
.wrapper {
  height: 90vh;
  overflow: hidden;
}

＆＃13;

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>- jsFiddle demo</title>
</head>
<body>
  <div class="wrapper">
    <div class="outer">
      <div class="middle c">
        <div class="inner" id="a">1</div>
        <div class="inner" id="b">2</div>
        <div class="inner" id="c">3</div>
      </div>
    </div>
    <div class="wrapper">

    </div>
  </div>
</body>

</html>

＆＃13;

jQuery动画在小提琴中工作但在线不流畅

2 个答案: