Sliding a division using Jquery from the edges of the browser's window

<script>
    $(function(){
      $('#right_image1').hide().delay('10000').fadeIn('5000').animate({right: '0'}, 5000);
      $('#left_image1').hide().delay('10000').fadeIn('5000').animate({left: '0'}, 5000);
    });
</script>

/* CSS */
#left_image1 { position: fixed; width: 50%; height: 100%; margin-left: 0; background: url(/images/1.jpg) } 
#right_image1 { position: fixed; width: 50%; height: 100%; margin-left: 50%; background: url(/images/2.jpg) }

This code snippet currently fades in two divs after a 10 seconds delay. How can I achieve the effect of having the div on the right slide out of the right side of the browser window after 5 seconds of being displayed, and the left div to slide out of the left side of the browser after 5 seconds?

javascriptjquerycsshtml

Answer №1

View the functional demo on this link. Below is the revised JavaScript code:

$(function() {
    $('#right_image1').delay(10000).fadeIn(500).delay(5000).animate({
        marginLeft: '100%'
    });
    $('#left_image1').delay(10000).fadeIn(500).delay(5000).animate({
        marginLeft: '-50%'
    });
});

It is important to note the usage of numerical values for delay and fadeIn duration. The animate function manages the horizontal movement (left/right).

In addition, it is recommended to conceal elements using CSS rather than JavaScript for better practice.

Furthermore, specifying the left value in CSS helps prevent interference from margins or padding on the <body> element.

Answer №2

It could be something along the lines of:

$('#right_image1').hide().delay('10000').fadeIn('5000', function() {

    $(this).animate({right: '-1px'}, 5000);
});

$('#left_image1').hide().delay('10000').fadeIn('5000', function() {

    $(this).animate({left: '-1px'}, 5000);
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for selecting a JSON data node on-the-fly using jQuery

This is an example of my ajax function: $.ajax({ type: "GET", dataType: "json", async: false, url: "/wp-content/comment_data.php", data: 'songid=' + $array, success: function(data){ oTable.find('td').eac ...

javascriptjquery

Guide on darkening the surrounding div of an alert to give it a modal-like effect

I want to display an alert to the user in a visually appealing way. To achieve this, I am utilizing Bootstrap's alert class. Here is how I am showing the user a div: <div class="alert alert-warning alert-dismissible" role="alert"> Some text ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to ensure that an ASync function only continues once all necessary information has been collected?

retrieveStudentGrades() { let grades = {}; let totalStudents = this.state.studentDetails.length; let studentCount = 0; this.state.courses.map((course) => { this.state.studentDetails.map((student) => { request.get( ...

javascriptnode.jsreactjsasynchronous

The functionality of the anchor tag is not supported by the Safari browser on iPhone devices

Having some trouble with a named anchor tag in the iPhone Safari browser. It's functioning properly in desktop browsers, including Safari, but not working on mobile Safari. Odd! For instance, my URL appears as: http://www.example.com/my-example-arti ...

htmlcssiphonemobile-safarianchor

JavaScript: Generating multiple variables using a for loop?

Is there a way to dynamically create n variables a_1, a_2, a_3 ... a_n, where the value of n is determined during runtime? Attempting to use the following code would not produce the desired outcome: var n = prompt("Enter number of variables?"); for (i= ...

javascriptloopsvariablesfor-loop

Interactive tooltip with hyperlinks powered by jQuery

Is it possible to create a pop-up window with links that behave like a normal tooltip but can be clicked on by the mouse? How can this functionality be achieved without losing focus when hovering over the links causing the window to close? jQuery(docume ...

javascriptjquerytooltip

Why does my page keep refreshing even after I close the model?

I am facing the following issues: 1- Whenever I try to close my model by clicking 'cancel', it causes the page to reload. 2- Clicking 'OK' does not send the 'DELETE' request to the server, nothing is received, and the page r ...

javascriptangularjs

Choose a specific cell in the table and store it in the session

I am new to working with PHP and have never dealt with sessions before. My current goal is to randomly select a table cell and save its location (x,y coordinates) in a new session. Below is the code I have so far, but I am unsure of what steps to take ne ...

phphtml

The ID update functionality in Node.js is malfunctioning

Hello everyone, I am currently venturing into the world of NodeJS with a goal to create a backend API for a car rental agency. After writing some code to update, view, and delete records by id stored in MongoDB, I encountered a strange issue where it only ...

javascriptnode.jsmongodbexpressmongoose

Elevate your website's design with Vue and create eye-catching CSS

I've been working on a Vue hamburger menu component, but I'm facing an issue with the animations. The animation process seems to reach the desired end result, yet there is no actual animation displayed. The animation triggering is done through a ...

javascriptanimationvue.jscss-animations

Ways to quickly change a class when clicking (without waiting for mouse button release)

Is there a way to instantly change the color of my span element when it's clicked by the user, rather than waiting for the mouse button to be released? This is the CSS code I'm using for the class: span.active{ color:#bdbcae; } I've tri ...

jqueryhtmlcsstoggleclass

Content that is dynamically generated by a database

I have been working on creating a unique wall feature for my website, inspired by Facebook. My aim is to allow users to submit form data and have it validated before storing it in a database. Additionally, I want this stored data to be displayed in a desig ...

javascriptphpjqueryhtmlfacebook

Changing the color of a marker on hover in Mapbox using leaflet.js

I have encountered an issue where setting the geojson triggers the mouseover event, causing an infinite loop and breaking functionality. I managed to fix it by changing it to click, but now I need to figure out how to make it work with hover. My goal is t ...

javascriptruby-on-railsajaxleafletmapbox

The Bootstrap row snag causing text display issues

There seems to be a glitch when the first column has more text than the one next to it. Check out the screenshot provided for reference. Any suggestions on how to fix this issue in Bootstrap? https://i.sstatic.net/fSq68.png Live Demo: https://jsfiddle. ...

htmlcsstwitter-bootstrap

Two scenarios for tag class and just class are considered in this discussion

FOUND THE SOLUTION. Sending a huge shoutout to @JHeth and @Marko Vucurovic for their invaluable help! This query may seem lengthy, but the concept is straightforward. Let's break it down into 2 scenarios: Scenario I <html> <head><titl ...

htmlcss

Angular displays X items in each row and column

I've been struggling with this task for the past 2 hours. My goal is to display a set of buttons on the screen, but I'm facing some challenges. The current layout of the buttons doesn't look quite right as they appear cluttered and unevenly ...

javascripthtmlcssangulartypescript

What are some ways to implement src imports in Vue3?

Can you guide me on using a component in VUE3 with composition API and script setup pattern? For example, let's say I have a component named Modal. Here is how I plan to structure the folder: Modal.vue - this file will contain the Vue template and ...

javascriptvue.jsvuejs3

Changing the class of an element in Svelte: A step-by-step guide

I am working on a svelte application and I want to implement row highlighting when a user clicks on it. Here is an example code snippet that demonstrates this functionality: <div id="A" class="car-even">A</div> <div id=&q ...

csssvelte

The Math.random() function is responsible for producing a single random number

I have a unique idea for a keyboard that generates divs when keys are pressed. The keyboard functionality has already been implemented. Each div should be positioned randomly on the screen but still be grouped by letter. My approach involves adding a rando ...

javascriptjqueryrandom

Verify whether the field includes a minimum number of numerical digits

I am currently using this script to validate whether a field is empty or not. The script works well for me, but I would like to add a condition that the field must contain at least 10 digits (numbers). If it doesn't meet this requirement, I want to di ...

javascriptformsvalidationerror-handling