jQuery fadeIn 在 iPhone 上不起作用答案

【问题标题】：jQuery fadeIn Not Working on iPhonesjQuery fadeIn 在 iPhone 上不起作用
【发布时间】：2016-11-03 21:27:41
【问题描述】：

相当基本的淡入/淡出。根本无法在任何 iPhone 上运行。在 Safari 桌面版中运行良好。有什么建议吗？

谢谢！

            <div class="maploading" style="float:right;margin-top:17px;">
                <img src="whatever.jpg" />
            </div>
            <script type="text/javascript">
                var $kds = jQuery.noConflict();
                $kds("div.maploading").hide();
                $kds("#addressSubmit").click(function() { 
                    $kds("div.maploading").fadeIn(100).delay(1200).fadeOut(400); 
                });
            </script>

【问题讨论】：

标签： jquery iphone safari

【解决方案1】：

我找到了解决方案。我不知道这是否适用于所有人。显然，设置您希望显示/隐藏的对象需要“位置：绝对”。值得注意的是，这可能会大大改变您的元素定位。

        <div class="maploading" style="position:absolute;display:none;">
            <img src="whatever.jpg" />
        </div>
        <script type="text/javascript">
            var $kds = jQuery.noConflict();
            $kds("#addressSubmit").click(function() { 
                $kds("div.maploading").fadeIn(100).delay(1200).fadeOut(400); 
            });
        </script>

愚蠢的苹果设备。

【讨论】：

【解决方案2】：

我在 IOS 13 上使用 Safari（编写 PWA 应用程序）时也遇到了这个问题。我通过使用 CSS 3 动画解决了这个问题

 .page-element {
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

【讨论】：