Javascript 用于交换两个元素位置的Jquery动画

我有两个元素的位置和大小，我只想在点击第二个元素时交换

<div id="card-1" class="1">
    Some Content for 1
</div>

<div id="card-2" class="2">
    Some Content for 2
</div>

然后我交换类，正如您在最后3行代码中看到的那样，以获得相同的效果

当我第一次点击卡片2（第2类）时，位置和大小会被交换，并且类别也会被切换为div，但是当我点击卡片1（第2类）时，我没有得到相同的效果。如何再次获得相同的效果

这就是我的页面最初的外观

我希望#div1缩小到#div2当前所在的位置，而#div2扩大到#div1当前点击#div2的位置。像这样的

这正在发生。但是，我希望div在单击#div1时返回到其原始位置。像这样的。 但这并没有发生

我已经为动画使用了课程，所以在第一步之后，我正在交换课程。但我得到的却是这种结果

---

我无法理解您的确切要求，请您详细说明。请参考此信息，也许它会对您有所帮助。

$(document).on('click', '.2', function(){
    var path_1 = {
        start: { 
          x: 0, 
          y: 0, 
          angle: -120
        },  
        end: { 
          x:0,
          y:360, 
          angle: -120, 
          length: 0.25
        }
    }

    var path_2 = {
        start: { 
          x: 0, 
          y: 0, 
          angle: -180
        },  
        end: { 
          x:0,
          y:-360, 
          angle: -60, 
          length: 0.25
        }
    }

    $(".1").animate({
        width: "-=50%",
        path : new $.path.bezier(path_1)
    }, 2500);


    $(".2").animate({
        width: "+=100%",
        path : new $.path.bezier(path_2)
    }, 2500);

    var x = $('.2').attr('id');
    var y = $('.1').attr('id');

    $('#'+ x +',#'+ y +'').toggleClass('2 1');
});