flying image into basket using javascript instead of JQUERY

Question

I am trying to do the flying cart which means when ever Add to cart button is clicked, the product image should be taken as clone and fly into the basket. The same as this video

you tube video

The video has the code as

$("button").on("click",function(){
$(this).closest("li")
.find("img")
.clone()
.addClass("zoom")
.appendTo("body");

setTimeout(function(){
$(".zoom").remove();
},1000);
});

The same I should do in javascript / html without Jquery.

My trying

  var itm1 = document.getElementById("one");
  // HEre I can take the clone of the image.
  var cln1 = itm1.cloneNode(true);
  // Here I need to add the css to this image as per the video.

You don't seem to have attempted anything? – Pete Aug 09 '19 at 13:07 — Pete, Aug 09 '19 at 13:07

score 1 · Accepted Answer · answered Aug 09 '19 at 13:17

You just have find the element, copy it, add it to the document and then add the class that has the animation.

Here is a working example:

document.querySelectorAll(".item").forEach(function(item) {
  item.querySelector(".add").addEventListener("click", function() {
    document.body.appendChild(item.querySelector(".image").cloneNode()).classList.add("floating");
  });
});

.image {
  height: 40px;
  width: 40px;
}

.image.floating {
  animation: fade-out-in-right 2s linear 0s 1 normal forwards;
  position: absolute;
  right: 20px;
  top: 20px;
}

@keyframes fade-out-in-right {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  80% {
    transform: translateX(-20px);
    opacity: 1;
  }
  100% {
    transform: translateX(0px);
    opacity: 0;
  }
}

<div class="item">
  <div class="image" style="background: blue"></div>
  <button class="add">Add To Cart</button>
</div>
<div class="item">
  <div class="image" style="background: red"></div>
  <button class="add">Add To Cart</button>
</div>

I applied this to see the effect in the example [in codepen]( https://codepen.io/iganchev87/pen/bXxRer). I think that gives a solution to the problem. — Ivan Ganchev, Aug 09 '19 at 15:05

elke_wtf · Answer 2 · 2019-08-09T13:25:48.793

0

cln1.classList.add("zoom");
var body = document.getElementsByTagName("BODY")[0];
body.innerHTML = cln1;

How to add content to html body using JS?

You should read up on modifying the DOM.

I haven't tested this code but in theory I believe it will work.

edited Aug 09 '19 at 13:25

answered Aug 09 '19 at 13:13

elke_wtf

887
1
14
30

`innerHTML` is not a function and only accepts string values – charlietfl Aug 09 '19 at 13:16
I just updated the code. Apologies I referenced it incorrectly. – elke_wtf Aug 09 '19 at 13:26
Still can't pass an element to `innerHTML` though, only strings – charlietfl Aug 09 '19 at 13:27
The method appendChild() should work in that case. – elke_wtf Aug 09 '19 at 13:30

flying image into basket using javascript instead of JQUERY

2 Answers2