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

#left のトランジションがいつ完了したかを追跡するには、transitionend イベントを使用します。以下で行ったブラウザのプレフィックスを確認する必要があります。その後、指定されたプレフィックスを使用してリッスンできます。起動したら、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 に答える