Javascript 在不影响内容的情况下进行div擦除/显示

我在一个项目上遇到了点麻烦

我有一个菜单项，当它被点击时，我想加载动画，将从左向右擦拭，并改变文本和背景的颜色

我能想到的最好的方法是复制div，应用一个“克隆”类来更改颜色，并将其放置在单击的div上。不过，我似乎无法进行擦除

我正在尝试使用clip：

$('.flight').click(function () {
    $(this).clone(true).addClass('cloned').appendTo($(this).parent())
    $(this).siblings('.cloned').stop().animate({
        'clip': 'rect(0px 0px 300px 0px)'
    }, 1000)
});

---

任何关于我哪里出错的建议都将不胜感激

好的，所以我找到了剪辑问题的解决办法。虽然不漂亮，但它很管用！我只允许自己使用它，因为功能不需要动画，克隆块将在完成后删除

$('.flight').click(function() {
  // Clone and add the class
  $(this).clone(true).addClass('cloned').appendTo($(this).parent())
  // For every div under .cloned fix the width and height, this will prevent
  // any responsiveness that we don't want.
  jQuery.each($('.cloned div'), function(){
    $(this).css('width', $(this).innerWidth())
    $(this).css('max-height', $(this).innerHeight())
  })
  // Set the container width to 0 now, would not work before as we need
  // calculable widths. Then animate!
  $('.cloned').css('width', '0')
  $('.cloned').animate({
    width: '100%'
  })
});