Modernizr触摸||悬停以获取图像链接

Question

我正在尝试用这个功能处理移动和桌面。有没有一种方法可以将我正在使用的这个脚本用于悬停，并为Modernizr添加一个or运算符，看看它是否检测到触摸功能，如果没有，则使用悬停？希望有人能帮我澄清这一点。

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

下面是一个在桌面上工作的例子http://jsfiddle.net/chris_s/dcq2F

Answer 1

使用Modernizr，您当然可以设置一个条件，正如您在上面的评论中推断的那样，它只运行一个或另一个函数：

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

关于性能，您还可以考虑使用默认的css转换或动画，然后在悬停函数上利用!Modernizr.csstransitions。

当然，由于移动是一个如此移动的目标，任何一种解决方案都需要注意。也许可以根据几个标准（屏幕大小、功能检测、多填充等）进行组合测试，并选择最适合您的情况。