Question

我在制作动画时遇到一些问题，并且在我的ipad上随机停留

所以我有这个HTML

<body>


<div class="touchslider-prev  sliderButtons" style="display: block;">back</div>
<div class="touchslider-next  sliderButtons" style="display: block;">next</div>

<section id="mainContent" style="width: 950px; overflow:hidden">

    <div id="pageHolder" style="float: left; left: 0;  position: relative; width: 6000px;">


         <div class="pageSize activeSlide" id="page1" style="width: 950px; float: left;  position: relative; height:500px; background-color:#F00">

           blah

         </div>  


          <div class="pageSize " id="page" style="width: 950px;  float: left;  position: relative; height:500px; background-color:#FF0">

           blah 2

         </div>          


    </div>


</section>

</body>

和这个javascript

<script type="text/javascript">

function clickHandlerPrev(event) {

    // If event isn't already marked as handled, handle it
    if(event.handled !== true) {

        // Kill event handler, preventing any more clicks
        jQuery(window).off("swipeBackward", clickHandlerPrev);
    jQuery(window).off("swipeForward", clickHandlerNext);

        // Do your stuff here
        pageSize = jQuery(".mainHeader").width();
        slide("back", pageSize);

        // Mark event as handled
        event.handled = true;
    } 

    return false;
}

function clickHandlerNext(event) {

    // If event isn't already marked as handled, handle it

    if(event.handled !== true) {

        // Kill event handler, preventing any more clicks
        jQuery(window).off("swipeBackward", clickHandlerPrev);
    jQuery(window).off("swipeForward", clickHandlerNext);

        // Do your stuff here
        pageSize = jQuery(".mainHeader").width();
        slide("forward", pageSize);

        // Mark event as handled
        event.handled = true;
    }
    return false;
}



function slide(data, pageSize) {


    if (!pageSize) {
    pageSize = 950;
    }

    var left = calcLeft(data, pageSize);




        jQuery('#pageHolder').animate({
            left: left

          }, 400, function() {
            console.log("animation started");
            jQuery(window).on("swipeBackward", clickHandlerPrev);
    jQuery(window).on("swipeForward", clickHandlerNext);
            console.log("animation complete");

        });



}

function calcLeft(action, pageSize){

    var left;
    var currentPos = currentPosition();


    if (action == "back") {
console.log(pageSize);

        if (currentPos == "0") {
            left = -pageSize * 1;
        } else {

            left = currentPos + pageSize ;

        }

    } else if (action == "forward") {


        if (currentPos == -pageSize * 1) {
            left = 0;
        } else {        
            left = currentPos - pageSize ;

        }

    }

    return left;

}

function currentPosition() {

    var currentPosition = parseInt(jQuery("#pageHolder").css("left"), 10);
    return currentPosition;
}






jQuery(document).ready(function () {

jQuery(".touchslider-prev").click( function() { 

    jQuery(window).trigger('swipeForward');

});

jQuery(".touchslider-next").click( function() { 

    jQuery(window).trigger('swipeBackward');

});


jQuery(window).on('swipeForward', clickHandlerNext );
jQuery(window).on('swipeBackward', clickHandlerPrev );


console.log("here");
var maxTime = 1000,
    // allow movement if < 1000 ms (1 sec)
    maxDistance = 50,
    // swipe movement of 50 pixels triggers the swipe
    target = jQuery('.pageSize'),
    startX = 0,
    startTime = 0,
    touch = "ontouchend" in document,
    startEvent = (touch) ? 'touchstart' : 'mousedown',
    moveEvent = (touch) ? 'touchmove' : 'mousemove',
    endEvent = (touch) ? 'touchend' : 'mouseup';

target.bind(startEvent, function(e) {
    // prevent image drag (Firefox)
    // e.preventDefault();
    startTime = e.timeStamp;
    startX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
}).bind(endEvent, function(e) {
    startTime = 0;
    startX = 0;
}).bind(moveEvent, function(e) {
    // e.preventDefault();
    var currentX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
        currentDistance = (startX === 0) ? 0 : Math.abs(currentX - startX),
        // allow if movement < 1 sec
        currentTime = e.timeStamp;
    if (startTime !== 0 && currentTime - startTime < maxTime && currentDistance > maxDistance) {
        if (currentX < startX) {
            // swipe left code here

           console.log("page forward trigger");
           jQuery(window).trigger('swipeForward');

        }
        if (currentX > startX) {
            // swipe right code here
             console.log("page back trigger");
           //slide("back", pageSize);
            jQuery(window).trigger('swipeBackward');
        }
        startTime = 0;
        startX = 0;
    }
});


});


</script>

如果你打开这个就说一个ipad的想法是你可以刷主色面板。这有时会工作，有时也不会，我真的很难找到原因

任何人都可以帮忙吗？

幻灯片会定期停止，但如果用户只使用后退/下一个按钮，它总是有效，但幻灯片代码似乎没有问题，因为它只会触发事件？

我已将代码放在这里

http://demo.stg.brightonconsulting.net.au/templates/tests/ipadSlider/

Answer 1

在我看来，您可以为swipeForward和swipeBackward安装事件处理程序，但之后您只需卸载触发的事件处理程序。下一次，你再次安装两个事件处理程序，因此其中一些将堆积并安装多次，当一次安装多次触发时，肯定会弄乱你的动画。如果你要在一个人开火时卸载，那么你需要卸载两个，而不仅仅是解雇的那个。点击处理程序也存在同样的问题。

此外，在calcLeft()中，变量left应声明为局部变量。另外，当jQuery.when(promise)是整数时promise做什么？您应该将延迟对象传递给jQuery.when()。

.animate随机失败

1 个答案: