带有jQuery和动画的全屏背景图像

我在iPad上使用

背景尺寸：cover

来显示全屏背景图像。在

上，单击（function（）{$（this）.addClass（'example'）}）div更改其大小。首先我们得到：

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

然后我们得到了类似的东西

height: 50%;
width: 50%;

然后，在另一个屏幕上单击“尺寸”更改回“尺寸”

height: 100%;
width: 100%;

但背景不再具有可伸缩性。我怎样才能解决这个问题


在台式机上工作很好。（包含背景图像的div命名为
。启动img

对于所有想深入挖掘的人：
在
上单击
一个类
。第二个
被添加到变换图像的
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; 
}

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

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

我想问题是，背景图像保持在
高度：40%
，而不是转换回
高度：100%
。最好“强制”背景图像再次缩放以覆盖（即使属性
背景大小：覆盖
在此过程中从未更改）.
这是一个非常特殊的问题。我仍然不知道为什么，但有两个命令用于设置元素不透明度的动画。禁用这两行对我来说很好

也许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');
});

我无法解释原因，并将在一个最小化的示例中就此展开另一次讨论。
您能分享
单击事件的完整代码和css属性吗？嘿@OfirBaruch，我已经添加了您要求的其他信息。代码非常复杂，但是（对我来说）似乎上面的代码才是最重要的。以防万一，我添加了一个站点的实时预览作为url。希望这能帮助理解这个问题。因为我没有iPad，所以实时版本无效；）当点击“x”时，第二个
类被删除了？我建议在事件完成后使用css属性的
document.alert
，以便您能够知道它是否转换回100%。是的，该类正在被删除。老实说，我不知道你所说的
document.alert
是什么意思。你的意思是插入
.removeClass（'second'）.alert（'helloworld'）
检查函数是否启动？对不起，我对jquery/javascript不太了解。类似于：
.removeClass（'second'）.alert（$（this.css（'width'））因此我们可以确保宽度正在更新。