javascript - div 删除/显示而不影响内容

Question

我在一个元素中遇到了一些麻烦。

我有一个菜单项，当它被点击时，我想要一个从左到右删除并改变文本和背景颜色的加载动画。

我能想到的最佳方法是复制 div，应用更改颜色的“克隆”类并将其放置在单击的 div 之上。我似乎无法进行删除工作。

我正在尝试使用剪辑:

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

JSFIDDLE

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

Answer 1

好的，所以我从剪辑问题中找到了解决方法。它不漂亮，但它有效!我只允许自己使用它，因为功能不需要动画，并且克隆的 block 将在完成后删除。

$('.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%'
  })
});

JSFIDDLE