Question

I currently am using a script that executes a fade effect when mousing over icons (It fades them from color to black and white). I m having issues with it not working properly on an iPad or iPhone because of the hover event.

是否有办法以排除iPad、i、甚至可能还有一种roid装置的状态来总结如下?

    <script>
            $(document).ready(function() {
            $("ul.gallery li").hover(function() { //On hover...
            $(this).siblings().each(function () {
                var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to  thumbOver 
                    //Set a background image(thumbOver) on the &lt;a&gt; tag
                $(this).find("a.thumb").css({ background  :  url(  + thumbOver +  ) no-repeat center bottom });
                    //Fade the image to 0
                    $(this).find("span").stop(false,false).fadeTo( normal , 0 , function() {
                    $(this).hide() //Hide the image after fade
                        });
                });
            } ,
            function() { //on hover out...
                $(this).siblings().each(function () {
                        //Fade the image to 1
                    $(this).find("span").stop(false,false).fadeTo( normal , 1).show();
                    });
                    });
            });
    </script>

Thank You

Answer 1

you can check for iPad using navigator.platform:

// Is the user on an iPad?
var isIpad = navigator.platform.toLowerCase() === "ipad";

similarly, you can check for other iDevices using an object literal and the in operator:

// Is the user on an iDevice?
var isIDevice = navigator.platform.toLowerCase() in {
    "ipod": true,
    "ipad": true,
    "iphone": true
};

to keep your code from running under these conditions, you can keep your setup logic above in a named function and execute it conditionally on DOM-ready, such as:

<script type="text/javascript">
(function() {

    // Setup routine
    var ready = function() {
        $("ul.gallery li").hover(function() { //On hover...
            $(this).siblings().each(function () {
                var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to  thumbOver 
                //Set a background image(thumbOver) on the &lt;a&gt; tag
                $(this).find("a.thumb").css({ background  :  url(  + thumbOver +  ) no-repeat center bottom });
                //Fade the image to 0
                $(this).find("span").stop(false,false).fadeTo( normal , 0 , function() {
                    $(this).hide() //Hide the image after fade
                });
            });
        },
        function() { //on hover out...
            $(this).siblings().each(function () {
                //Fade the image to 1
                $(this).find("span").stop(false,false).fadeTo( normal , 1).show();
            });
        });
    };

    // Current platform
    var platform = navigator.platform.toLowerCase();

    // List of iDevice platforms
    var iDevices = {
        "ipod": true,
        "ipad": true,
        "iphone": true
    };

    /*
    // OPTION 1:
    // On DOM-ready, execute for everthing except iPad
    $(function() {
        if ( platform !== "ipad" ) {
            ready();
        }
    });
    */

    // OPTION 2
    // Only execute if not an iDevice
    $(function() {
        if ( !(platform in iDevices) ) {
            ready();
            $(window).resize(function () {
                viewportSize();
            });
        }
    });

})();

要做到诚实,即从未做过基因和探测甲状腺,但应当采用类似的方法。

希望帮助! che。

友情链接