Question

非常基本的淡入/淡出。根本不适用于任何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>

Answer 1

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

        <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>

愚蠢的Apple设备。

Answer 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;
    }
}

jQuery fadeIn不适用于iPhone

2 个答案: