Javascript-форум - Как проиграть анимацию при удалении файлов в корзине?

monah_79,
всё обозначено контуром, картинки сами добавьте.
здесь, картинки переместите в корзину и убедитесь что красный квадрат(строка 31) появляется в том месте где вы отпустили картинку.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=utf-8>
    <title>StarTrackr!</title>
    <style>
    #photo-grid img {
        cursor: move;
    }
    #photo-grid img {
        width: 100px;
        height: 100px;
    }
    .trash {
        position: relative;
        padding: 10px 10px;
        border: 1px solid white;
        margin-bottom: 40px;
        width: 50%;
    }
    #trash-image {
        position: absolute;
        background-image: url(images/epuff.png);
        background-repeat: no-repeat;
        background-size: cover;
        width: 128px;
        height: 120px;
        background-position: 0 -768px;
        top: -40px;
        left: -20px;
        border: 1px solid #f00;
    }
    .trash.drop-hover {
        border: 1px solid #006400;
    }
    </style>
</head>
<body>
    <section id="container">
        <header id="header">
            <h1>**************</h1>
        </header>
        <div id="content">
            <h2>Images</h2>
            <div class="trash">
                <div id="trash-image" />
            </div>
            <img src="images/trash.png" alt="trash" />
            <span id="trash-title">Drag images here to delete</span>
        </div>
        <div id="photo-grid">
            <img src="images/fader_100.jpg" />
            <img src="images/beau_100.jpg" />
            <img src="images/glenda_100.jpg" />
            <img src="images/mofat_100.jpg" />
        </div>
        </div>
        <footer id="footer">
            <p>
            </p>
        </footer>
    </section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(function() {
            $('#photo-grid img').draggable();
            $('.trash').droppable({
                hoverClass: 'drop-hover',
                drop: function(event, ui) {
                    $(ui.draggable).hide();
                    let {top: t, left : l} = $('.trash').offset();
                    let {top, left} = ui.offset;
                    $('#trash-image').css({top: top - t - 10, left: left - l - 20});
                    $({
                            numberValue: 0
                        })
                        .animate({
                            numberValue: 6
                        }, {
                            duration: 600,
                            easing: "linear",
                            step: function(val) {
                                val = (-Math.round(val) * 128) + 'px';
                                $('#trash-image').css({
                                    'background-position-y': val
                                })
                            }
                        })
                }
            })
        })
    </script>
</body>
</html>