1

我正在尝试创建与那里相同的“动画”：

http://letmehaveblog.blogspot.it/?view=classic

仅当帖子到达窗口中心时才会加载帖子的评论。如果我只更改包含评论的 div 的 css 显示或不透明度属性（未修改帖子的高度）但当我使用 slideUp/slideToggle 因为我想模拟负载时变得一团糟，我的代码工作正常通过 ajax 编写的 php 脚本。我正在处理这个 javascript 代码：

$(document).ready(function () {
var winWidth, winHeight;

function show_post_content() {

/* Check the location of each desired element */                          
$('.post').each( function(i){    

var top_of_object = $(this).position().top;       
var top_of_window = $(window).scrollTop();                                                                
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();          

/* If the object is completely visible in the window, fade it in */   
//if( bottom_of_window > bottom_of_object ){  
if( top_of_object < parseInt(winHeight / 2)) {                            

    //$(this).children('.comments').css('display','block');                                                                      
    //$(this).children('.comments').animate({'opacity':'1'},500);  
    //$(this).children('.comments').fadeIn(500);  
    //$(this).children('.comments').animate({'opacity':'1'},500);
    $(this).children('.comments').slideToggle('slow');   

}                                                                     

});      

}    

function hide_post_content() {

  $('.post').each( function(i){

    $(this).children('.comments').slideUp();

  });   

}    

function init() {
  winWidth = $(window).width();
  winHeight = $(window).height();

  hide_post_content();
  show_post_content();  
}

init();

$(window).resize(function () {
  init();
});

/* Every time the window is scrolled ... */
$(window).scroll( function(){       
  show_post_content();      
});     

});

HTML就是这样一个：

<div class="post">Post  
<div class="comments">Comments</div>
</div>
<div class="post">Post  
<div class="comments">Comments</div>
</div>
<div class="post">Post  
<div class="comments">Comments</div>
</div>
...

使用 css: .post { 不透明度: 1;
宽度：600px；最小高度：100px；背景颜色：#ffffff；
显示：块；填充：0px；边距：30px 自动；
边框：1px 实心#000000；}

.comments{
  opacity: 1;
  width: 580px;
  height: 50px;
  display: none;
  margin:100px 0 0 0; 
  padding:10px; 
  background-color: #aaaaaa;    
}

我在这里寻找答案，但找不到可以让我走上正确道路的答案。有什么想法或建议吗？非常感谢，埃里克

4

1 回答 1

0

该slideToggle函数异步执行其动画。它还改变了后面的帖子元素的位置。因此，在each您正在调用的函数中，然后在完成更改其他帖子元素的位置slideToggle之前继续进行下一次迭代。slideToggle这是一个问题。另一个是滚动事件会在您滚动时触发很多次。比执行所需的次数更多show_post_content。

所以这里有一些建议：

  1. 作为第一步show_post_content，无论滚动事件如何，请确保以您想要的方式工作。您应该show_post_content退出该ready功能（您必须添加winHeight = $(window).height();到开头）。然后您就可以在 Chrome 或 Firefox 中从控制台执行它。在您滚动到页面上的不同位置后执行此操作，并确保它按您期望的方式工作。您可能希望将函数更改为在一个帖子完成后停止，或者仅在动画完成后继续下一个帖子（slideToggle允许您在完成时传递一个回调函数）。

  2. 限制scroll事件。有这个插件，或者您可以在 SO 周围搜索其他选项。更好的是仅show_post_content在用户停止滚动时运行。这更难，但你可以从这里开始。

于 2013-02-03T01:54:50.960 回答