Using jQuery to animate a DIV sliding in from the side

Question

Using jQuery to animate a DIV sliding in from the side

When a user scrolls down (x) pixels, I'm smoothly sliding a DIV into the viewport horizontally. If the user scrolls back up, the DIV scrolls out again. However, the sliding motion appears jerky and pauses at certain moments.

<div id="doom_o"></div>

div#doom_o {
    position: fixed;
    left: -300px;
    z-index: -1;
    height: 400px;
    width: 309px;
    background-image: url("../images/doom_o.png");
    background-repeat: no-repeat;
}

$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        setTimeout(function() {
            $('#doom_o').stop().animate({left: "20%"});
        }, 250);
    } 
    else {
        setTimeout(function() {
            $('#doom_o').stop().animate({left: "-300px"});
        }, 250);
    }
});

javascript jquery css

Answer 1

Answer №1

To prevent stuttering, it is important to remove the setTimeout calls from the if condition and instead wrap the entire block in its own setTimeout. By doing this, the code will only be executed once the scrolling has finished, rather than being triggered every time the scroll event occurs.

var timer;
$(window).scroll(function() {
    clearTimeout(timer);
    var timer = setTimeout(function() {
        if ($(this).scrollTop() > 100) {
            $('#doom_o').stop().animate({ left: "20%" });
        } 
        else {
            $('#doom_o').stop().animate({ left: "-300px" });
        }
    }, 150)
});

Check out this example on JSFiddle

Answer 2

To prevent stuttering, it is important to remove the setTimeout calls from the if condition and instead wrap the entire block in its own setTimeout. By doing this, the code will only be executed once the scrolling has finished, rather than being triggered every time the scroll event occurs.

var timer;
$(window).scroll(function() {
    clearTimeout(timer);
    var timer = setTimeout(function() {
        if ($(this).scrollTop() > 100) {
            $('#doom_o').stop().animate({ left: "20%" });
        } 
        else {
            $('#doom_o').stop().animate({ left: "-300px" });
        }
    }, 150)
});

Check out this example on JSFiddle

Using jQuery to animate a DIV sliding in from the side

Answer №1

Similar questions

Tips on aligning multiple elements vertically in a justified manner

Choosing CSS/JS selector: Pick the final element with a class that does not match

Adjusting the inner div dimensions to be 100% of the body's size without relying on the parent div using JavaScript

Scroll horizontally on a webpage using drag with JavaScript

In Firefox, the HTML label fails to activate the corresponding input field when the mouse is moved while clicking

Vertical alignment in material-ui's Grid component is not functioning as expected

Jquery is not displaying the background color of the progress bar

Having performance issues with an HTML5/JavaScript game on Internet Explorer 8

I am struggling to create a responsive form using Bootstrap

What is the reason behind the failure of next/script with Google reCAPTCHA?

Managing the inclusion of double quotes that are dynamically inserted using ajax and jquery

Error: Express JS custom module cannot be located in the root directory's modules folder

Can Node.js endpoints effectively handle the garbage collection of new class instances?

Display the list box against the masked background

What could be causing my CSS navigation toggle button to malfunction?

Troubleshooting: AngularJS Form Submission Failure

Swapping out a sequence of characters in a web address with a different set

Is there a way to automatically clear the text field value after submitting?

Utilize dynamic tags to implement filters

I often find myself pondering the significance of objects such as [, thisArg]