jQuery动画工作在小提琴，但不光滑的在线

本文介绍了jQuery动画工作在小提琴，但不光滑的在线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

这里是一个指向小提琴的链接：

似乎只有在 #a 已展开， #b 或 #c 或单击 #b 并单击 #c 。

尝试对 .animate（）使用单个单击事件处理程序$ c> easings 属性设置为linear， css 元素到 33％

  $ （）{$（this）.siblings（）。animate（{width：10％，opacity：0.6}，0，linear）; $（this）.animate（{width：80％ ：1}，0，linear）; }）;

  div.inner {max-width：0 ; display：table-cell; overflow：hidden;} div.outer {display：table; overflow：hidden;宽度：100％; height：100％;} div.middle {display：table-row; overflow：hidden;}＃holder {width：100％;高度：100％; margin：0px auto; overflow：hidden; position：fixed;}＃a {width：33％;高度：100％; background-color：red;}＃b {width：33％;}高度：100％; background-color：blue;}＃c {width：33％;}高度：100％; background-color：green;}。wrapper {height：90vh; overflow：hidden;}＃a，＃b，＃c {transition：width 500ms，opacity 500ms;}

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script> < div class =wrapper> < div class =outer> < div class =middle> < div class =innerid =a> 1< / div> < div class =innerid =b> 2< / div> < div class =innerid =c> 3< / div> < / div>

href =http://jsfiddle.net/tJugd/3798/ =nofollow> http://jsfiddle.net/tJugd/3798/

I've made a sort of accordion with three expanding divs (#a, #b, #c) in fiddle, but when I save it locally and open it in a browser the transitions are no longer smooth. I noticed specifically after clicking #b with #a expanded. I've included the HTML that references the CSS and JavaScript code. What's the cause and what is the best way to solve it?

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

Here is a link to the fiddle: http://jsfiddle.net/tJugd/3794/

It seems like it only happens when either #a is expanded and #b or #c are clicked or #b is expanded and #c is clicked.

解决方案

Try using single click event handler for animations with .animate() easings property set to "linear", css transition for effects, set width of .middle div elements to 33%

$(".middle div").click(function() {

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<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>

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

这篇关于jQuery动画工作在小提琴，但不光滑的在线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！