Question

大家好，周五好！我已经有了一个不错的过渡效果，但实际上它将页面滑出然后滑入下一页。我正在使用Yii，我正在尝试滑动当前视图并同时将视图单击到div中，因此它看起来像你'将一个假设的相机移动两页（希望有意义）

这是JS：

var slideWhere = "-100%";
var slideFrom = "100%";
var slideContainer = '#testdiv';
var htmlData = null;


/**
@function ? Grabs a Yii based URL(controller/action) via ajax then slides it into view.
@paramset Classic
@param {String} yUrl - Yii based url (controller/action)
@param {optional String} dMove - can be 'right' or 'left' : default is 'left'
@param {optional String} dWhat - specific element, class, or id you are replacing. default is '#testdiv"
*/
function pLoad(yUrl, dMove, dWhat) {
    dMove = typeof dMove !== 'undefined' ? dMove : 'left';
    dWhat = typeof dWhat !== 'undefined' ? dWhat : '#testdiv';

    slideContainer = dWhat;

    // If you type anything else but 'right' it will go left (default)
    if (dMove == 'right') {
        slideWhere = "100%";
        slideFrom = "-100%";
    } else {
        slideWhere = "-100%";
        slideFrom = "100%";
    }

    $.pjax({
        url: yUrl,
        container: slideContainer
    });

}
$(document).on('pjax:send', function() { if ($("#mobileToggle").css("display") == 'none') { return; } $(slideContainer).animate({marginLeft: slideWhere },250); });
$(document).on('pjax:complete', function() { if ($("#mobileToggle").css("display") == 'none') { return; } $(slideContainer).css("margin-left",slideFrom); $(slideContainer).animate({marginLeft: "0%" },250); });



$(document).on('pjax:error', function() {return false;});

以下是HTML： 实验性pJax视图

    <button style="previous" onClick="pLoad('/test/tpage1')">Test One </button>
    <button style="previous" onClick="pLoad('/test/tpage2')">Test Two</button>
    <button style="next" onClick="pLoad('/test/tpage3','right')">Test Three</button>

<br />

--- Test Div ---


<div id="testdiv" >update area</div><br/>

--- End div --

我已经把它工作得很好了，它只在浏览器宽度很小时滑动（由css控制器！） - 问题是，如何让两个页面都滑动而不会增加太多？什么是最简单的方法？

有什么想法吗？谢谢！

如何在转换期间移动prev和next pjax页面？

0 个答案: