Joe Joe - 1 month ago 8
jQuery Question

jQuery fadeIn Not Working on iPhones

Pretty basic fade in/out. Simply will not work on any iPhone. Works fine in Safari desktop version. Any suggestions?

Thanks!

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

Joe Joe
Answer

I found a solution. I don't know if this will work for everyone. Apparently, setting the object you wish to show/hide requires 'position:absolute'. It should be worth noting this might substantially change your element positioning.

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

Stupid Apple devices.