全屏背景图像 jQuery 和动画

Question

我在 iPad 上使用 background-size: cover 来显示全屏背景图像。在 .click(function(){ $(this).addClass('example') }); 上 div 改变了它的大小。所以首先我们得到：

position: absolute;
height: 100%;
width: 100%;

然后我们得到了类似

的东西

height: 50%;
width: 50%;

然后，再次点击尺寸变回

height: 100%;
width: 100%;

但背景不再缩放。我该如何解决这个问题？

You can see a video with the error from an ipad right here.

在台式机上运行良好。 Live version（包含背景图片的div被命名为.start-img

致所有想深入挖掘的人： 在 click 上，一个 class .second 被添加到 div.start-img 上，它会转换图像。所以起初它

.start-img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom left;
  z-index: 1;
  transition: all 0.5s ease-in-out;
  height: 100%;
  width: 100%;
  position: absolute; 
}

通过点击添加或删除的class具有以下属性：

.start-img.second {
    width: 100%;
    height: 40%;
}

我想问题是，背景图像保留在 height: 40% 而不是变回 height: 100%。 "force" background-image 再次缩放以覆盖它会很棒（即使属性 background-size: cover 在此过程中从未更改过）。

Answer 1

这是一个很特殊的问题。我仍然不知道为什么，但是有两个使用 jquery.transit 的命令用于为元素的不透明度设置动画。停用这两条线对我来说效果很好。

也许 iPad 可以通过 css 转换获得有限数量的动画？

虽然我有一个脚本，我在其中创建了这样一个函数：

example = function(){
   /* other animations to do and the following */
   $('.start-img').addClass('second');
}

$('#example').click(example);

不适用于 iPad，而以下版本完美：

example = function(){
   /* other animations to do and the following */

}

$('#example').click(function(){
   /* other animations to do and the following */
   $('.start-img').addClass('second');
});

我无法解释原因，将在最小化的示例中对此展开另一个讨论。

全屏背景图像 jQuery 和动画

Fullscreen background-image with jQuery and Animation

jquery

ipad

ios