jquery - 如何为移动浏览器制作全 Angular 部分幻灯片？

示例结构：

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

我希望.main滑到左侧，而.slider从右侧滑入。

最佳答案

好的，这就是我所做的：

$("#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);
    });
});

关于jquery - 如何为移动浏览器制作全 Angular 部分幻灯片？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28905218/