What is a method to shift an element to the side without actually deleting it from the DOM (perhaps using a simulated slide

For nearly a month, I've been battling with a challenging issue and so far have had no success.

Imagine a scenario where there's a button along with an element in the DOM (such as an image or something similar).

Upon clicking this button, the element should slide either left or right. Initially, accomplishing this was straightforward.

$(button).on('click',function(){
$('mySlidingElement').slideToTheLeft();
// This functionality is working well.
});

However, I don't want the element to vanish!

Just like in this image:

You can see that the image is sliding to the right but isn't disappearing. It almost appears as if there are two identical pictures!

It's as though I aim to display a pseudo or faux sliding effect.

I could use two images and then animate the front one. While this solution would be effective, it's not the route I wish to take.

I wasn't sure how to articulate my question properly, and if it's unclear, please forgive me:(

NOTE: I'm utilizing AngularJS and jQuery, while my slide animation involves adding and removing CSS classes.

Many thanks

Answer №1

Check out this solution for your needs :)

HTML

<div id="dynamic"></div>

CSS

    * {
    padding:0;
    margin:0;
}
#dynamic {
    width:300px;
    height:300px;
    background:skyblue;
    -webkit-transition: all 3s ease-in-out;
}
#dynamic::after {
    content:"";
    width:300px;
    height:300px;
    background:lightgreen;
    position:absolute;
    left:0;
    top:0;
    -webkit-transition: all 4s ease-in-out;
    opacity:0;
}
#dynamic.slideEffect::after {
    content:"";
    left:150px;
    opacity:1;
}

Javascript

$("#dynamic").click(function () {
$(this).toggleClass("slideEffect");

});

Instead of colors, you can use images by setting them as backgrounds in this div

DEMO

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

What is the best way to adjust the size of an SWF object using a Blueprint CSS span range?

Utilizing Blueprint CSS, I am crafting a 3 column layout: LEFT COLUMN: span-6 CENTER COLUMN: span-12 RIGHT COLUMN: span-6 Within the center column, I aim to insert an SWF object that requires a predetermined size upon setup: swfobject.embedSWF(url, "fla ...

Could not connect: AJAX Request denied?

I am currently hosting a Digital Ocean server that runs on a MEN stack composed of MongoDB, Express, and Node. The registration form can be accessed at: When attempting to choose an option from the dropdown menu, I encounter the following error message: G ...

Fetch operates based on the specified categoryId

Hey there, I'm currently in the process of learning JS and trying to fetch data from an API. I've successfully fetched all the work from api/works and displayed them in a div. Now, I'm looking to create 3 buttons that represent 3 categories ...

Error: Unable to access the 'searchField' property because it is null

An error occurred: Cannot find the searchField property of null in App.render https://i.sstatic.net/ZYp3L.png ...

Get rid of the dashed outline surrounding the selected button

One of my divs has a button inside that, when clicked, creates an outline around it. Here is what it looks like: https://i.sstatic.net/pEr53.png **Code: ** .slide-arrow { color: #fff; background-color: #9E9997; border: none; padding: 16px 10px ...

Differentiating Typescript will discard attributes that do not adhere to an Interface

Currently, I am working with an API controller that requires a body parameter as shown below: insertUser(@Body() user: IUser) {} The problem I'm facing is that I can submit an object that includes additional properties not specified in the IUser int ...

managing pictures with ng-repeat

I am struggling to display images from an array using ng-repeat. Can someone help me with this? var images = [ "http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":171}}}", "http: ...

The JQUERY code for refreshing a div requires a timeout delay

I'm looking for a way to refresh a specific div on my website that's used for chat. Here's the code I currently have: var refreshId = setInterval(function() { $('#chat_grab').load('chat_grab.php?randval=' + Math.rand ...

Tips for maintaining the current object's status while utilizing ngFor in Angular

The JSON data provided is structured as follows. [ { "route":"vehicle", "next-route":"driver", "isActive":false }, { "title":"Driver", "route":"driver ...

ngTable select all data that has been filtered

I have encountered an issue with selecting only the rows from an ng-table that have been filtered. The current code filters the table rows successfully, but it also selects rows that are not displayed: Controller: let sampleData = [{id: 1, name: 'Jo ...

I am interested in combining fabricjs with vue.js

I am currently exploring the integration of fabricjs with vue.js, but I have encountered some issues along the way. Below is a snippet of my code: var app = new Vue({ el: '#content_vue', data: { }, methods: { add_image: function() ...

Is it just me or is one of these pieces of javascript not functioning properly?

I set out to develop a checklist that would automatically adjust a slider as users interacted with checkboxes. After some research, I stumbled upon the following two code snippets: http://jsfiddle.net/t2nvft7q/ $(document).on('click', '.ch ...

Using an HTML element to pass a variable into a replace function

I am looking to highlight a 'SearchString' by replacing it with <span style="background-color: yellow">SearchString</span> within a targetString. The SearchString varies, so I am wondering how I can make this happen. This is what I ...

Tips and tricks for sidestepping Access-Control-Allow-Origin restrictions when making an API post request

In my .net application, I am utilizing ajax and jQuery to consume a Payment API. This particular API requires basic authentication and a post type. However, when I attempt to fire the API using ajax, I encounter the following error: "Access to XMLHttpRe ...

Having a Jquery resizing problem? No worries! When the width is less than 768, simply enable the click option. And when the width is

HTML <div class="profile"> <a href="#" class="hoverdropdown" onclick="return false;">Profile</a> <ul class="dropdown" style="display: none;"> <li><a href="#">Dashboard&l ...

The isPublic function in mean.js menu seems to be malfunctioning

While working on a mean.js application, I encountered an issue with displaying menu items in the top navbar. The menu items show up when the user is signed in, but not when they are signed out. According to the mean.js documentation, setting the 'isP ...

Troubleshooting Asynchronous Code in JavaScript

I was experimenting with creating a brute force poll voting script. $('#vote').click(function(e) { var votes = 0; var attempts = 0; var failures = 0; for(var i = 0; i < 500; i++){ ...

Display or conceal content based on checkbox status

i am trying to create a system where content is hidden by default and only displayed when a checkbox is checked. The goal is to show the content when the checkbox is checked and hide it when unchecked, so that other content can be shown as well upon checki ...

The fixed header in IE8 is preventing the absolute positioned menu from displaying correctly

Here is some HTML and CSS code that showcases a fixed header and a menu that appears on hover: <style type="text/css"> .header { position: fixed; top: 0; width: 100%; height: 50px; background: #AAA; } ...

Guide on how to enable the first dropdown menu item upon clicking in Bootstrap 5

I am using Bootstrap 5 dropdowns and have defined them as follows: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a2825253e393e382b3a0a7f647b">[email protected]</a>/ ...