【问题标题】: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;
          }
      }
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2011-02-13
        • 1970-01-01
        • 2011-07-31
        • 1970-01-01
        • 1970-01-01
        • 2013-09-22
        • 1970-01-01
        相关资源
        最近更新 更多