转换后的jquery元素闪烁和ios上的scrolltop

Question

好吧,这将是艰难的...希望大师们提出一个解决方案!

这很难解释,但是这里......

我有两个要素:

<style>
#elem1 {
position:absolute;
left:-1400px;
z-index:1000;
width:100%;
}
.anim {
  -webkit-transition: -webkit-transform 0.5s ease;
  -moz-transition: -moz-transform 0.5s ease;
  -ms-transition: transform 0.5s ease;
  -o-transition: -o-transform 0.5s ease;
  transition: transform 0.5s ease;
}
.overr {
  transform:translate(1400px,0);
  -ms-transform:translate(1400px,0); 
  -webkit-transform:translate(1400px,0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}  
</style>
<script>
$('#btn a').click(function(){
 currentPos = $(window).scrollTop();
 $('#elem1).toggleClass('overr');
 $('#elem1).attr('style', 'top:' + currentPos + 'px;');

 setTimeout(function() {
  $('#elem2').toggle(0);
  $('#elem1').attr('style', 'top:0');
  $(window).scrollTop( 0 );
  }, 500)
});
</script>

<div id="elem1" class="anim">content here</div>
<div id="elem2">content 2 here></div>

我想在这里实现的是:元素2根本没有样式,只是一个简单的元素.单击按钮,获取#elem2位置,将#elem1从左侧带入抽屉,使其顶部位于屏幕的当前位置,然后隐藏#elem2,#elem1返回顶部,屏幕向上滚动.

结果是,我在同一页面上,在底部加载了一个完全不同的内容,我可以滚动而不会过度滚动(这在iPhone上需要很多 - 移开顶部和底部条 - 实际上这是我之所以需要这个).

问题:

问题是屏幕闪烁在最后的$(窗口).scrollTop(0) - 该死的屏幕闪烁.如果我在页面顶部启动脚本,它不会闪烁.

a)我尝试改变脚本的顺序,但改变的东西不能给我所需的结果.b)将过渡效果更改为"线性"会使这更好,但您仍然可以看到它.

我知道这件事很难,但希望有人帮我这个!

编辑:看起来是$('#elem2').toggle(0)和$(window).scrollTop(0)同时触发,所以在瞬间它闪烁看起来它也带来#elem2 at顶部,这就是为什么它闪烁......:/我到目前为止浪费了4个小时:(

edit2:即使完全删除动画过渡,仍然会闪烁.我睡觉了,不能再保持清醒了......希望我早上有礼物:/

Answer 1

您是否考虑过使用 animate 功能？可以实现这一点，以便在前一个动画完成之前不会发生后续样式更改。显然，您可以根据需要嵌套尽可能多的动画（为了说明目的，我在下面只嵌套了几个动画），这消除了多任务处理时出现的问题。

<style type="text/css">
    #elem1 {
    position:absolute;
    left:-1400px;
    z-index:1000;
    width:100%;
    }
</style>
<input id="btnA" type="button" value="Click Me" />
<div id="elem1">Element 1</div>
<div id="elem2">Element 2</div>
<script type="text/javascript">
    $('#btnA').click(function () {
        currentPos = $(window).scrollTop();
        $('#elem1').animate(
            { left: 0 }
            , {
                duration: 500
                , easing: "linear"
                , complete: function () {
                    $('#elem2').toggle(0);
                    $('#elem1').animate(
                        { top: 0 }
                        , {
                            duration: 0
                            , complete: function () {
                                $(window).scrollTop(0);
                            }
                        }
                    );
                }
            });
    });
</script>

参考资料： http: //api.jquery.com/animate/