jQuery动画工作在小提琴,但不光滑的在线 [英] jQuery animate working in fiddle but not smooth online
问题描述
我做了一个手风琴,有三个扩展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>
这里是一个指向小提琴的链接: http://jsfiddle.net/tJugd/3794/
似乎只有在 #a
已展开, #b
或 #c
或单击 #b
并单击 #c
。
尝试对 .animate()$ c>使用单个
单击
事件处理程序$ 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动画工作在小提琴,但不光滑的在线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!