Question

我在项目上遇到了一些麻烦。

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

我认为这样做的最好方法是复制div，应用克隆＆＃39;更改颜色并将其放置在单击的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

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

$('.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

div擦除/显示而不影响内容

1 个答案: