jQuery动画在小提琴中工作但在线不流畅
[英]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. 
我在小提琴中制作了一种带有三个扩展div（ #a ， #b ， #b #c ）的手风琴，但是当我在本地保存并在浏览器中打开它时，过渡不再平滑。 I noticed specifically after clicking #b with #a expanded. 点击#b后我特意注意#a扩展。 I've included the HTML that references the CSS and JavaScript code. 我已经包含了引用CSS和JavaScript代码的HTML。 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/ 这是一个小提琴的链接： 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. 现在看来似乎只发生在任何#a扩大和#b或#c被点击或#b扩大和#c被点击。
2 个解决方案
解决方案1
6 已采纳 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% 尝试使用单个click事件处理程序用于与动画.animate() easings属性设置为"linear" ， css transition为效果中，设置width的.middle div元素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/ jsfiddle http://jsfiddle.net/tJugd/3798/
解决方案2
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.