Home/ Questions/Q 8757531
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T14:19:24+00:00

I have an animation on my page that slides a div into the screen,

  • 0

I have an animation on my page that slides a div into the screen, pushing the current div in the screen out. While it is animating, an ajax request is sent to grab a page and put it into the div.

For some reason, my code works OK on Firefox but stutters using Chrome.

Here is the page: (try clicking the left eye)

http://www.uvm.edu/~areid/homesite/index.html

What I want to do (as per recommendation of @jfriend00) is add an event listner to the slideOut() function to make it so the ajax request won’t start until the slideOut() has finished. Separating the ajax call and the animation should lessen the load of the code and therefore prevent Chrome from stuttering as it does now.

here is my slide out function:

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>

It might be best just to use firebug on the actual site.

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re going to want to use the transitionend event to track when #left’s transitions complete. You will have to check for browser prefixes which I’ve done below. After that we can use the designated prefix and listen. Once fired, you can make your ajax call.

    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);
    • 0