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

【问题标题】：Fullscreen background-image with jQuery and Animation带有 jQuery 和动画的全屏背景图像
【发布时间】：2015-08-12 14:49:25
【问题描述】：

我在 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 上，一个类.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; 
}

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

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

我想问题是，背景图像保留在height: 40%，而不是转换回height: 100%。最好“强制”背景图像再次缩放以覆盖（即使属性background-size: cover 在此过程中从未更改过）。

【问题讨论】：

能否分享click事件的完整代码和css属性？
嘿@OfirBaruch，我已经添加了您要求的其他信息。代码非常复杂，但（对我而言）似乎上面的代码才是最重要的。以防万一我添加了网站的实时预览作为 url。希望对理解问题有所帮助。
因为我没有 iPad，所以 live 版本无效；) 点击“x”时，second 类被删除了吗？我建议在事件完成后使用 document.alert 的 css 属性，这样您就可以知道它是否转换回 100%。
是的，课程正在被移除。老实说，我不知道document.alert 是什么意思。你的意思是插入.removeClass('second').alert('Hello World'); 来检查函数是否触发？抱歉，我对 jquery/javascript 的了解并不长。
类似：.removeClass('second').alert($(this).css('width')); 这样我们就可以确定宽度正在更新。

标签： jquery ios ipad

【解决方案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');
});

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

【讨论】：