Как я могу сделать полноразмерный слайд для мобильных браузеров?

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); 
    }); 
});