Jquery 上标+；响应性设计=未正确流动

在此特定站点上使用超级动画在箭头中设置动画：

这也是一个反应灵敏的设计。960+、768、480和320。使用媒体查询触发不同的布局。如果我以箭头正确设置的任何浏览器大小加载站点，则当我展开或最小化窗口时，它会移动到错误的位置。不知道这里发生了什么。有人有什么想法吗

我有绝对位置的元素，以防止水平滚动条

要遵循的jQuery超级脚本代码：

    jQuery(document).ready(function() {
        //ACTIVATE BUTTON FOR SMOOTH SCROLLING
        jQuery("#scroll_button").scrollTo('#section_two_outer');

        //MOVE ARROWS ON SCROLL
        var controller = jQuery.superscrollorama();
        //INDIVIDUAL ELEMENT TWEEN
        controller.addTween('.apply_now_arrow_left', TweenMax.from(jQuery('.apply_now_arrow_left'), .5, {css:{left:'-2500px'}}));
        controller.addTween('.apply_now_button', TweenMax.from(jQuery('.apply_now_button'), .5, {css:{opacity: 0}}));
        controller.addTween('.apply_now_arrow_right', TweenMax.from(jQuery('.apply_now_arrow_right'), .5, {css:{left:'5000px'}}));

戴夫

事实上，在我看来，你的网站并没有出现Supersrollerama的问题，你看到的问题似乎是由于内联CSS对页面元素所做的更改。例如，当启动动画时，它只是随着时间的推移设置CSS“left”属性的动画，但一旦完成，left属性将保留在元素上，随着窗口大小的调整，该元素会破坏布局

为了解决这个问题，我建议在动画完成后使用jQuery回调从箭头中删除内联CSS，这样在调整窗口大小时样式表就可以控制它们的位置。最糟糕的情况是，如果在视口大小改变时动画发生（我甚至不知道如何实现），那么会出现几乎无法想象的闪烁，因此我认为您最好还是去做

// Demo code from http://johnpolacek.github.com/superscrollorama/
controller.addTween('#fade', 
  TweenMax.from($('#fade'),.5,{
    css:{opacity:0}, 
    onComplete: function(){alert('test')}
  }));

所以，你可能想做这样的事情：

jQuery(document).ready(function() {
    //ACTIVATE BUTTON FOR SMOOTH SCROLLING
    jQuery("#scroll_button").scrollTo('#section_two_outer');

    //MOVE ARROWS ON SCROLL
    var controller = jQuery.superscrollorama();
    //INDIVIDUAL ELEMENT TWEEN
    controller.addTween('.apply_now_arrow_left', TweenMax.from(jQuery('.apply_now_arrow_left'), .5, {css:{left:'-2500px'}, onComplete:function(){jQuery('.apply_now_arrow_left').css("left","auto")}}));
    controller.addTween('.apply_now_button', TweenMax.from(jQuery('.apply_now_button'), .5, {css:{opacity: 0}}));
    controller.addTween('.apply_now_arrow_right', TweenMax.from(jQuery('.apply_now_arrow_right'), .5, {css:{left:'5000px'}, onComplete:function(){jQuery('.apply_now_arrow_right').css("left","auto")}}));

当然，YMMV取决于样式表的工作方式，因此您可能会做一些不同的事情，但这是基本的总体方法。

Dave

事实上，在我看来，你的网站并没有出现Supersrollerama的问题，你看到的问题似乎是由于内联CSS对页面元素所做的更改。例如，当启动动画时，它只是随着时间的推移设置CSS“left”属性的动画，但一旦完成，left属性将保留在元素上，随着窗口大小的调整，该元素会破坏布局

为了解决这个问题，我建议在动画完成后使用jQuery回调从箭头中删除内联CSS，这样在调整窗口大小时样式表就可以控制它们的位置。最糟糕的情况是，如果在视口大小改变时动画发生（我甚至不知道如何实现），那么会出现几乎无法想象的闪烁，因此我认为您最好还是去做

// Demo code from http://johnpolacek.github.com/superscrollorama/
controller.addTween('#fade', 
  TweenMax.from($('#fade'),.5,{
    css:{opacity:0}, 
    onComplete: function(){alert('test')}
  }));

所以，你可能想做这样的事情：

jQuery(document).ready(function() {
    //ACTIVATE BUTTON FOR SMOOTH SCROLLING
    jQuery("#scroll_button").scrollTo('#section_two_outer');

    //MOVE ARROWS ON SCROLL
    var controller = jQuery.superscrollorama();
    //INDIVIDUAL ELEMENT TWEEN
    controller.addTween('.apply_now_arrow_left', TweenMax.from(jQuery('.apply_now_arrow_left'), .5, {css:{left:'-2500px'}, onComplete:function(){jQuery('.apply_now_arrow_left').css("left","auto")}}));
    controller.addTween('.apply_now_button', TweenMax.from(jQuery('.apply_now_button'), .5, {css:{opacity: 0}}));
    controller.addTween('.apply_now_arrow_right', TweenMax.from(jQuery('.apply_now_arrow_right'), .5, {css:{left:'5000px'}, onComplete:function(){jQuery('.apply_now_arrow_right').css("left","auto")}}));

当然，YMMV取决于样式表的工作方式，因此您可能会做一些不同的事情，但这是基本的总体方法