Question

我正在使用一个名为beforeAfter（http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/）的插件，并且已实现它的方式我想仅仅在用户使用屏幕说580px的时候整合点击。现在我有它的开发代码，但不确定如何添加媒体查询。

以下是完整代码的链接 http://jsbin.com/ojuwid/1/

以下是插件文件中的片段，我需要将其合并到媒体查询中：

// When clicking in the container, move the bar and imageholder divs
                $(obj).click(function(e){
                    var clickX = e.pageX - $(this).offset().left;
                    $('#dragwrapper'+randID).stop().animate({'left':clickX-($('#dragwrapper'+randID).width()/2)+'px'},o.clickSpeed);
                    $('div:eq(2)', obj).stop().animate({'width':clickX+'px'},o.clickSpeed);
                    $('#lt-arrow'+randID+',#rt-arrow'+randID).stop().animate({opacity:0},50);
                });
                $(obj).one('mousemove', function(){$('#dragwrapper'+randID).stop().animate({'opacity':1},500);}); 

// If the mouse is over the container and we animate the intro, we run this to change the opacity when the mouse moves since the hover event doesnt get triggered yet
                }
            });

如果有人对他们如何做到这一点有任何想法或方法，这将是伟大的！ PS-I我知道媒体查询是一个CSS概念 - 只是不确定如何触发窗口调整大小查询到这个插件。

Answer 1

您可以添加if($(window).width() <= 580)等条件吗？

代码如下所示：

    // When clicking in the container, move the bar and imageholder divs
                    $(obj).click(function(e){
                        if($(window).width() <= 580) { //added this line
                            var clickX = e.pageX - $(this).offset().left;
                            $('#dragwrapper'+randID).stop().animate({'left':clickX-($('#dragwrapper'+randID).width()/2)+'px'},o.clickSpeed);
                            $('div:eq(2)', obj).stop().animate({'width':clickX+'px'},o.clickSpeed);
                            $('#lt-arrow'+randID+',#rt-arrow'+randID).stop().animate({opacity:0},50);
                        } //added this line too
                    });
                    $(obj).one('mousemove', function(){$('#dragwrapper'+randID).stop().animate({'opacity':1},500);}); 

    // If the mouse is over the container and we animate the intro, we run this to change the opacity when the mouse moves since the hover event doesnt get triggered yet
                    }
                });

Answer 2

是否需要成为mediaQuery？如何在绑定事件之前通过js检查窗口的大小？

if(window.screen.width <= 580) {
    //...bind the event
}

Answer 3

您的媒体查询和jQuery的$（窗口）.width（）之间可能存在不一致，因此您可能希望尝试检查changed CSS properties，而不是与您拥有的媒体查询相对应。这应该确保应用CSS媒体查询和jQuery处理点击之间的一致性。

jQuery媒体查询

3 个答案: