0

我的页面上有一个动画，将 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。

谢谢！

4

1 回答 1

2

您将希望使用 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);
于 2012-10-31T23:03:49.853 回答