jquery .animate and .effect function not working in angular 8 component

1. The code showing jquery implementation.

 

import { Component, OnInit } from "@angular/core";

import $ from "jquery";

@Component({
  selector: "prod-details",
  templateUrl: "./product-details.component.html",
  styleUrls: ["./product-details.component.css"]
})
export class ProductDetailsComponent implements OnInit{
 
  ngOnInit(){
       $('.prod-det-card-btn').on('click', function () {
        var cart = $('.cart img');
        var imgtodrag = $(this).parent('.prod-det-card').find("img").eq(0);
        if (imgtodrag) {
            var imgclone = imgtodrag.clone()
                .offset({
                top: imgtodrag.offset().top,
                left: imgtodrag.offset().left
            })
                .css({
                'opacity': '0.5',
                    'position': 'absolute',
                    'height': '200px',
                    'width': '200px',
                    'z-index': '1001',
                    'transform':'scale(2)'
                    
            })
                .appendTo($('body'))

              /*  .animate({
                'top': cart.offset().top + 10,
                    'left': cart.offset().left + 10,
                    'width': 75,
                    'height': 75
            }, 1000, 'easeInOutExpo');
            
            setTimeout(function () {
                cart.effect("shake", {
                    times: 2
                }, 200);
            }, 1500);**
 */
            imgclone.animate({
                'width': 0,
                    'height': 0
            }, function () {
                $(this).detach()
            });
        }
    });
  }
  
}

2. The above lines .animate and .effect is showing errors when executed from a component. it works when the code is written inside an index.html file but only once.

HTML Code to display items in a page:

<div class="small-container">
    <h2 class="title">Hindware Collection</h2>
    <div class="row" id="shopping-cart">        
        <div class="prod-det-card">
            <img src="/assets/images/product-details/h4.jpg" alt="">
            <p class="prod-det-card-title">Hindware Atlantic Ondeo Pure</p>
            <p class="prod-det-card-rate">MRP Price: Rs. 15990.00</p>
            <button class="prod-det-card-btn">Add to Cart</button>
        </div>
    </div>
</div>

Once the code will run. The above card will be converted to use products from database using *ngFor to populate items in a component.

effect function error

easing function error