3

私はWordPress3.0テーマを開発しています。これは、jQueryが少し強化された最初のテーマです。各投稿領域のページネーションをフェードアウトおよびフェードインしようとしています。ユーザーが「前へ」または「次へ」の矢印をクリックすると、リストされた投稿がフェードアウトし、投稿の次のページが読み込まれてからフェードインするという考え方です。

フェードアウトは正常に機能しますが、新しいコンテンツはフェードインせず、フェードインせずにポップインします。見た目は大丈夫ですが、やりたいことができず、理由がわかりません。

これが開発環境で現在機能している2つの場所です（FF 3.5、FF 3.6、Chrome以外ではまだ実際にクロスブラウザーテストを行っていないため、IEを使用している場合は期待どおりに機能しない可能性があります）：

http://kendraschaefer.com/mandapop/gallery/ http://kendraschaefer.com/mandapop/blog/

そして、これが対応するjQueryです。

$(document).ready(function(){
    $('#postPagination a').live('click', function(e){
        $('#blogListColWrapper, #galleryListColWrapper').fadeOut(200).load(link + ' #blogListCol', function(){ 
        $('#blogListColWrapper, #galleryListColWrapper').fadeIn(300); 
        Cufon.refresh(); });
    });

});

私は考えられるすべてを試しました。どんなアイデアでも大歓迎です。

4

1 に答える 1

1

インスタントフェードインは、リンクがデフォルトの動作を実行しているためです...新しいページを読み込んで、URLを監視して変更を確認してください:)

全体的に、あなたが探しているのは次のようなものだと思います。

$('#postPagination a').live('click', function(e){
  var link = this.href;
  $('#blogListColWrapper, #galleryListColWrapper').fadeOut(200).each(function() {
    $(this).load(link + ' #' + this.id, function(){ 
      $(this).fadeIn(300); 
      Cufon.refresh(); 
    });
  });
  e.preventDefault();
});

これにはいくつかの変更があります。最初はe.preventDefault()、リンクが実際にページに移動しないようにするためです。それが未定義になった後、クリックしているリンクから属性linkをプルする必要があります。あなたがしている部分hrefについては、いくつかの方法があります。ここでは、プロパティを取得できるように実際にロードされているdivを参照する簡単な方法を実行しました。#id.load().each()thisid

それぞれを使用しない別の方法を次に示しますが、両方 #blogLostColWrapperがページに#galleryListColWrapperある場合は簡単に壊れます...うまくいけば、そうではありません。

$('#postPagination a').die().live('click', function(e) {
  $('#blogListColWrapper,#galleryListColWrapper').fadeOut(200)
    .load(this.href + ' #blogListColWrapper,#galleryListColWrapper', function() {
      $(this).fadeIn(300); 
      Cufon.refresh(); 
    });
  e.preventDefault();
});
于 2010-08-15T20:57:47.780 に答える