Question

我正在玩一些jquery与ipad或其他平板电脑变焦玩得很好。应该有一个水平动画。当点击左右两侧的紫色按钮时，平板电脑上会发生可怕的重新连接。

我的视口设置为1200。

这是我的jquery。随着动画在内容中拉入水平和淡入淡出，ipad重新振作了一会儿，然后自我解决。

<script>
jQuery(document).ready(function($) {

$('.link').click(function() {
    $('#page').css('display','block');
    $('#page').animate({'left':'0px'}, 600);
    //$('#page2').animate({'left':'11400px'}, 600);
    //$('#page3').animate({'right':'-11400px'}, 600);
    $('#page3').hide(100);
    $('#page2').hide(100);
    $('#page2').animate({'left':'1090px'}, 600);
});

$('.link2').click(function() {
    //$('#page').hide(100);

    //$('#page3').css('display','block');
    $('#page3').show();
    $('#page3').animate({'left':'0px'}, 600);

    $('#page').hide(100);
    $('#page2').hide(100);
    $('#page2').animate({'left':'-1090px'}, 600);
    //$('#page2').hide(100);
    //$('#page2').animate({'left':'-1000px'}, 600);
});

$('.link-back').click(function() {
  $('#page').hide(100);    
    $('#page3').hide(100);
    $('#page2').css('display','block');
    $('#page2').animate({'left':'0px'}, 600);
    $('#page').animate({'left':'-1090px'}, 600);    
    $('#page3').animate({'left':'1090px'}, 600);    
});

});
</script>

这是我的CSS

.wrapper {
    height: 1800px;
    width: 1080px ;
}
.wrapper2 {
    min-height: 1800px;
    width: 1080px ;
}

#page {
    position: absolute;
    left: -1090px; 
    width: 1080px;
    display: none;    
}
#page2 {
    width: 1080px;
    position: absolute;
    left: -15px;   
}
#page3 {
    position: absolute;
    width: 1080px;
    left: 590px; 
    display: none;     
}

Answer 1

以下是解决方案：

<meta name="viewport" content="width=1200, initial-scale=1, maximum-scale=1">

需要保持规模不变并需要修复拼写错误。

在ipad和平板电脑上jquery水平动画失败

1 个答案: