Animating a div in jQuery by creating a duplicate

I've spent hours scouring Google and StackOverflow for a solution to this particular issue I'm facing, but haven't been able to find one. Here's the problem:

I'm currently in the process of creating a shopping website. When a user clicks on the "add to cart" button, I want to slide a duplicate of the image/div to the left, then make it disappear after 2 seconds (without affecting the original div and disrupting the product order). How can I achieve this?

Here is the HTML code: http://pastebin.com/mMLMP035

javascriptjqueryhtmlcss

Answer №1

Give this a shot.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("button").click(function(){
cloneNode();

    });
});

function cloneNode() {
    var item = document.getElementById("img");
    var clonedItem = item.cloneNode(true);
    var copyItem = document.getElementById("parent").appendChild(clonedItem);
    $(copyItem).animate({left: '250px'}); // Let's animate this element
}
</script> 
</head>
<body>

<button>Click to Start Animation</button>
<div id="parent">
<div id="img" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</div>

</body>
</html>

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

Why is my Javascript XMLHttpRequest onreadystatechanged event not triggering?

I am facing an issue with my html file and a .txt file stored in the same directory on a webserver. In the html file, I have the following code: <html> <head> <script> window.onload = function() { receiveMessage(); } function recei ...

javascripthtmlajax

When you click the button, the page refreshes with no content

Every time I click on a button, an empty page reloads after invoking the button's onClick event. The code snippet on the page is as follows: <html> <head></head> <body>2015</body> </html> I am ...

c#htmlasp.net

Incorporate a header into the <img> request

Is it possible to include a header in a standard HTML <img> tag? Currently, we have: /path/to/image.png However, this path is actually a RESTful endpoint that requires a userID header. GET /path/to/image.png Header userId: BobLoblaw This endpoin ...

javascripthtmlangularjs

The Vue.JS application encountered an error while making an API request, resulting in an uncaught TypeError: Cannot read properties of undefined related to the 'quote'

<template> <article class="message is-warning"> <div class="message-header"> <span>Code Examples</span> </div> <div class="message-body"> ...

javascriptvue.jsvuejs3

The new version 5.1 of Bootstrap modal does not disable scrolling on the <body> element

I'm currently working on a project in Angular 11 using Bootstrap (v5.1.3). My main goal is to create a functionality where clicking on a card, similar to a blog post, will trigger a Bootstrap modal popup displaying the content of that specific post. B ...

htmlcssbootstrap-modalbootstrap-5bootstrap5-modal

Issues with jQuery '.ajax()' requests falling short

I'm currently attempting to make a jQuery .ajax() call to a public web service, but I seem to be struggling with finding the correct syntax. I've experimented with various implementations. For example: $.ajax({ url: 'http://www.geognos.c ...

jqueryajaxjson

Developing a compressed file in JavaScript

async purchaseMultiple(decoded, purchaseData){ const user = await Database.user.findOne({where: { id_user: decoded.id_user }}); if( ! user) return [404, 'ERROR: User [' + decoded.id_user + '] not found']; if(user.credi ...

javascriptnode.jszipjszip

What is the reason behind the shifting behavior of e.currentTarget when using event delegation in jQuery?

Click here for the code snippet <div id="container"> <button id="foo">Foo button</button> <button id="bar">Bar button</button> </div> $('#container').on('click', function(e) { var targ ...

javascriptjquerydom

Utilize a variable within an HTML attribute

Currently utilizing Angular and I have the following HTML snippet <input onKeyDown="if(this.value.length==12 && event.keyCode!=8) return false;"/> Is there a way for me to incorporate the variable "myNum" instead of the ...

javascripthtmlangular

Using React Hooks and useRef to Retrieve the clientHeight of Dynamically Rendered Images

I'm currently in the process of creating a dynamic image grid and need to determine the exact height of each image in pixels so I can adjust the layout accordingly. However, I've encountered an issue with accessing ref.current.clientHeight as it ...

javascriptreactjsnext.js

Display real-time information in angular material table segment by segment

I need to incorporate service data into an Angular mat table with specific conditions as outlined below: If the difference between the start date and end date is less than 21 days, display 'dd/mm' between the 'start_date' and 'end ...

javascriptangulartypescriptangular-materialangular-material-table

Results don't align with search parameters

const searchClientes = (event) => { if (event.target.value === '') { getClientes(); return; } else { const searchTerm = event.target.value; const filteredClients = clientes.filter(cliente => { return cliente.nome ...

javascriptreactjsfirebasenext.js

Using jQuery to Activate Genuine Events

Is it true that jQuery's trigger() only executes event handlers bound with jQuery? I have some modules that utilize native browser event binding. Although the solution from works for me, I'm curious if there is a built-in way in jQuery to handle ...

javascriptjqueryjquery-events

Exploring jQuery Mobile - What Causes an Empty State?

Using $.mobile.navigate("#test-page", {id:123}) for navigation to a secondary page seems to be successful. The transition between pages is smooth.... but the state remains empty! According to the documentation, the state should contain all necessary info ...

javascriptjqueryajaxjquery-mobilebrowser-history

Styling JSON data in a jQuery Mobile list display

Currently working on a jQuery Mobile application that aims to achieve a similar output as shown in this image: https://i.sstatic.net/CfUHB.png The HTML code responsible for generating the image is as follows: <ul data-role="listview" data-i ...

javascriptjqueryjsonjquery-mobile

Can you explain the distinction between $ and $.fn?

I have a burning curiosity to understand the distinction between $ and $.fn. Could someone kindly provide me with a detailed explanation? Additionally, I am eager to learn more about the purpose of $.fn. ...

jquery

Ways to automatically refresh a page without losing the current content within a div every minute

Currently, I am developing a food status tracking system that assigns a unique order number to each order. Upon loading the page, I make an AJAX call to retrieve the current status of the order. This information is then added to a div. However, I want any ...

phpjqueryajaxweb

Escape from the abyss of callback hell by leveraging the power of Angular, HttpClient, and

I'm currently grappling with understanding Angular (2+), the HttpClient, and Observables. I'm familiar with promises and async/await, and I'm trying to achieve a similar functionality in Angular. //(...) Here's some example code showca ...

javascriptangulartypescriptpromiseobservable

IE9 crashes when displaying elements with float:left style

After clicking the "off" and then "on" hyperlink in the provided HTML snippet, IE9 crashes. Here is the simplified version of the code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD& ...

htmlinternet-explorer-9

Is there a way to see the countdown timers in Angular 7?

Is there a way for me to view my timer's countdown as it starts? I have attempted to bind it to a variable, but all I see is [object Object]: setTime(time) { if (this.settime >= 5 ) { this.currentTime = time; this.alerttime = thi ...

javascripttypescriptangular7