如何为移动浏览器制作全宽度滑块？

Question

示例结构：

<div class="main"></div>
<div class="slider"></div>

我希望.main向左滑动，因为.slider从右侧滑入。

Answer 1

好的，这就是我的所作所为：

$("#mobile-filter").on('click', function()  {
    var $refine = $('#slider').clone();
    var $main = $("#main");
    $main.before($refine);
    var $placed_refine = $main.siblings('#slider');
    var page_width = $('body').width();
    $main.css('position', 'relative');
    // Animate out to the left
    $main.animate({left: -(page_width) + 'px'}, 500);
    $placed_refine.css({'position': 'fixed', 'right': '-200px'});
    var refine_width = $placed_refine.outerWidth();
    var refine_placement = (page_width - refine_width) + 'px';
    // Animate in from the right
    $placed_refine.animate({right: refine_placement}, 500, function(){
        // Make it scrollable
        $placed_refine.css({'position': 'absolute', 'right': 'initial'});
    });
    // Animate it back
    $(".results-back").on('click', function() {
        $placed_refine.css({'position': 'fixed', 'right': refine_placement});
        $placed_refine.animate({right: '-200px'}, 500, function(){
            $placed_refine.remove();
        });
        $main.animate({left: "0px"}, 500);
    });
});