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に、他の投稿要素の位置を変更します。それが 1 つの問題です。もう 1 つは、スクロール時にスクロール イベントが何度も発生することです。実行に必要な回数を超えていshow_post_contentます。

したがって、ここにいくつかの提案があります：

  1. 最初のステップとしてshow_post_content、スクロール イベントに関係なく、希望どおりに動作することを確認します。show_post_content関数から引き出す必要がありreadyます (winHeight = $(window).height();最初に追加する必要があります)。その後、Chrome または Firefox のコンソールから実行できます。ページの別の位置までスクロールしてから、期待どおりに動作することを確認してください。1 つの投稿が完了したら停止するように関数を変更するか、アニメーションが終了した後にのみ次の投稿に進むように変更することがslideToggleできます (完了時のコールバック関数を渡すことができます)。

  2. イベントを抑制しscrollます。このプラグインがあるか、他のオプションについて SO を検索できます。show_post_contentユーザーがスクロールを停止したときにのみ実行することをお勧めします。それは難しいですが、ここから始めることができます。

于 2013-02-03T01:54:50.960 に答える