Stephan GM Stephan GM - 17 days ago 5
CSS Question

jQuery animate working in fiddle but not smooth online

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.

Answer

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/

Comments