2011-07-13 13 views
1

本来divのコンテンツをそのdivのリンクからロードしようとしています。今それはある程度働く。私のコードはこれまでターゲットdivからのリンクを取得し、クリックすると 'content' divをアニメーション化し、ターゲットリンクの 'content' divに置き換えます。Jquery。正しくアニメーション化されず、ターゲット内のすべてのリンクを取得していません。

//Target links and call on click 
$('#scrollbox li a').click(function(){ 
//Define load paramaters 
var toLoad = $(this).attr('href')+' #content'; 
//Hide content 
$('#content').hide('fast',loadContent); 
//Remove Load Bar 
$('#load').remove(); 
//Show Load Bar 
$('#wrapper').append('<span id="load">LOADING...</span>'); 
$('#load').fadeIn('normal'); 


function loadContent() { 
    $('#content').empty().load(toLoad,'',showNewContent()) 
} 
function showNewContent() { 
    $('#content').show('slow',hideLoader()); 
} 
function hideLoader() { 
    $('#load').fadeOut('normal'); 
} 
return false; 

}); 

まず問題は、新しいコンテンツの上映に、古いコンテンツを非表示にした後、アニメーションが途切れていることである、とOLD内容はまだ表示され、最後milisecond新しいコンテンツだけ「が点滅になるまででアニメーション化古いコンテンツは隠されず、新しいコンテンツが表示されるべきではありませんか?私はこれを.emptyで修正しようとしましたが、今度は.showアニメーションがまったく存在しないかのようにちょうどちょっと変わってしまいます。

第2の問題は、自分のコードのいずれかに影響するように見える唯一のリンクはターゲットdiv内のヘッダーリンクであり、(ターゲットdiv内の) 'content' div内のリンクは影響を受けず、全てのページ。 div内のdivをターゲットにする必要がありますか?私のコードのdiv内のすべてのリンクを対象としていませんか?

さらに詳しい説明が必要な場合は、教えてください。

乾杯してくれてありがとう。

答えて

0

固定。アニメーションを0に設定して、アニメーションがまったくないようにします。 (安価な修正のように)

.live()コマンドを使用して、reloadのすべての後続リンクにコマンドをバインドします。

$(document).ready(function(){ 

$('.scroll-pane').jScrollPane({showArrows: true}); 

$('#scrollbox a').live('click', function() { 
//all elements that exist now and elements added later 
//with this class have this click event attached 

//Define load paramaters 
var toLoad = $(this).attr('href')+' #content'; 
//Hide content 
$('#content').hide(0,loadContent); 

function loadContent() { 
    $('#content').load(toLoad,'',showNewContent()) 
} 
function showNewContent() { 
    $('#content').fadeIn(0); 
} 

return false; 


}); 

}); 
関連する問題