我的页面上有一个动画，它将一个 div 滑入屏幕，将屏幕中的当前 div 推出。当它处于动画状态时，会发送一个 ajax 请求来抓取页面并将其放入 div 中。
出于某种原因，我的代码在 Firefox 上运行正常，但在 Chrome 上却出现卡顿。
这是页面:(尝试单击左眼)
http://www.uvm.edu/~areid/homesite/index.html
我想要做的(根据@jfriend00的建议)是向slideOut()函数添加一个事件监听器，以便在slideOut()完成之前ajax请求不会启动。将 ajax 调用和动画分开应该可以减轻代码的负载，从而防止 Chrome 像现在一样卡顿。
这是我的滑出功能:
JavaScript:
function SlideOut(element) {
var opened = $(".opened"),
div = $("#" + element),
content = $("#content");
opened.removeClass("opened");
div.addClass("opened");
content.removeClass().addClass(element);
}
CSS:
#content {
margin: 0 auto;
position:relative;
left:0;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
transition: all 0.9s ease;
}
#content.right {
left:-1150px;
}
#content.left {
left:1150px;
}
#content.bottom {
top:-300px;
}
#content.top {
top:1100px;
}
#content div {
cursor:pointer;
#left {
padding:0;
margin:0;
position:absolute;
top:0;
left:-1800px;
height:100%;
width:1750px;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
transition: all 0.9s ease;
background-color: #1a82f7;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, right top, from(#C6421F), to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(right, #C6421F, black);
/* Firefox 3.6+ */
background: -moz-linear-gradient(right, #C6421F, black);
/* IE 10 */
background: -ms-linear-gradient(right, #C6421F, black);
/* Opera 11.10+ */
background: -o-linear-gradient(right, #C6421F, black);
}
#left.opened {
left:0;
}
#left-content{
margin-left:70px;
position:relative;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
transition: all 0.9s ease;
}
HTML:
<html>
<body>
<div id="fullContainer">
<div id="right">
<div class="return-right">
<p>click me</p>
</div>
<div id="resume">
</div>
</div>
<div id="left">
<div class="return-left">
<p>click me</p>
</div>
<div id="left-content">
</div>
</div>
<div id="top">
<div class="return">
<p>click me</p>
</div>
</div>
<div id="bottom">
<div class="return">
<p>click me</p>
</div>
</div>
</div>
<div id="centerContainer">
<div id="relativeContainer">
<div id="content" class="center">
</div>
</div>
</div>
</body>
</html>
最好在实际站点上使用 firebug。
谢谢!
最佳答案
您将需要使用transitionend 事件来跟踪#left 的转换何时完成。您必须检查我在下面完成的浏览器前缀。之后我们就可以使用指定的前缀进行监听。一旦触发，您就可以进行 ajax 调用。
Javascript:
var myDiv, transition;
myDiv = document.getElementById('left');
if('ontransitionend' in window) {
// Firefox
transition = 'transitionend';
} else if('onwebkittransitionend' in window) {
// Chrome/Saf (+ Mobile Saf)/Android
transition = 'webkitTransitionEnd';
} else if('onotransitionend' in myDiv || navigator.appName == 'Opera') {
// Opera
// As of Opera 10.61, there is no "onotransitionend" property added to DOM elements,
// so it will always use the navigator.appName fallback
transition = 'oTransitionEnd';
} else {
// IE - not implemented (even in IE9) :(
transition = false;
}
myDiv.addEventListener(transition, function(){
//make ajax call here.
}, false);
关于javascript - 如何将事件监听器添加到我的 javascript 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13168616/