jQuery的：平滑宽度改变上滚动

我有一个工作jQuery代码：jQuery的：平滑宽度改变上滚动

$(document).ready(function(){  
      var scroll_pos = 0; 
      $(document).scroll(function() { 
       scroll_pos = $(this).scrollTop(); 
       if(scroll_pos < 10) { 
        $("div").css('width', 75); 
       } else if(scroll_pos > 25 && scroll_pos < 75) { 
        $("div").css('width', 100); 
       } else if(scroll_pos > 75 && scroll_pos < 100){ 
        $("div").css('width', 125); 
       }else if(scroll_pos > 100){ 
        $("div").css('width', 150); 
     } 
    }); 
});

和与宽度的div元素：在启动960x75像素。

当用户向下滚动潜水元素时，通过四个步骤将宽度从75px改变为150px，但是我正在寻找一些能够平滑地将宽度从75px改变为150px的东西，没有任何想法？

来源

2014-12-24 Belhor

你能在这个环节HTTP添加HTML contetn ：//jsfiddle.net/msasozbg/ – user00000341

http://jsfiddle.net/msasozbg/6/ – Belhor

而不是'.css'使用'.animate'。 [类似这样]（http://jsfiddle.net/anpsmn/msasozbg/8/） – anpsmn

也许这个解决方案是试图得到什么：

$(document).ready(function(){  
    var scroll_pos = 0; 
    $(document).scroll(function() { 
     scroll_pos = $(this).scrollTop(); 
     if (scroll_pos > 150) { 
      scroll_pos = 150; 
     }; 
     $("div").animate({ 
      width : (75+0.75*scroll_pos)+"px" 
     }); 
    }); 
});

来源

2014-12-24 05:38:44 Banzay

这很好，但如何停止在150px？现在它变得越来越大:) – Belhor

使用if-else条件，如果它小于或等于150px，将允许扩展。 –

答案已经改变。 – Banzay

您可能正在寻找jQuery中的.animate()。只需使用动画更改滚动div的大小即可。

$(document).ready(function(){  
    $(document).scroll(function() { 
     $("div").animate({ 
      width : "150px" 
     }); 
    }); 
});

对于滚动宽度的连续增量尝试这种方式。这将使每个卷轴的div宽度增加30px，并将增加，直到达到150px。

$(document).ready(function(){ 
    $(document).scroll(function() { 
     if($("div").width() <= "150"){ 
      $("div").animate({ 
       width : "+=30" 
      }); 
     } 
    }); 
});

jsFiddle

参考文献：.scroll()，.animate()

来源

2014-12-24 05:23:21

当你向下滚动大小不会减少。 –

@Prashant，如果你仔细注意，我的'jsFiddle'有评论说这个测试用例是用于增量处理的。我只是展示了一种完成工作的方式。不会去做你的家庭工作。如果你已经低估了，那么你需要更强的理由。 –

我检查了问题，用户不想重置或减少宽度。我会在一段时间后投票回答你的答案。 –

jQuery的：平滑宽度改变上滚动

回答

相关问题