Question

I am trying to tackle mobile and desktop with this function. Is there a way to take this script I’m using for hover and add an or operator for Modernizr to see if it detects the touch functionality, and if not, use hover? Hoping someone can help clarify this for me.

$(function() {
        $('ul.recent-widget li').hover(function(){
            $(this).find('img').animate({top:'182px'},{duration:500});
        }, function(){
            $(this).find('img').animate({top:'0px'},{duration:500});
        });
    });

Here’s an example of if working for the desktop http://jsfiddle.net/chris_s/dcq2F

Answer 1

Using Modernizr, you certainly could set up a conditional, as you infer in the comments above, which would only run one function or the other:

if ( Modernizr.touch ) {
   // click or bind to touchstart, touchmove, etc
} else {
   // hover (like your animation example)
}

Regarding performance, you might also consider using a default css transition or animation, then leverage !Modernizr.csstransitions, on that hover function, for example.

Of course, with mobile being such a moving target, there are caveats with any one solution. Perhaps combo test on several criteria (screen size, feature detection, polyfills, etc.) and go with what works best for your situation.