Question

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

谢谢！

Answer 1

您将要使用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函数中

1 个答案: