jQuery animate working in fiddle but not smooth online
Question
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.
2 answers
solution1
6 ACCPTED 2015-10-29 04:37:24
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/
solution2
0 2015-10-29 08:11:22
Try this
window.onload = function() { [].forEach.call(document.querySelectorAll('.inner'), function(el) { el.addEventListener('click', function(e) { this.parentElement.className = 'middle ' + this.id; }); }); } //]]>
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; }
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.