JQuery内部淡入淡出内容

时间:2011-09-15 17:54:10

标签: jquery ajax load

我正在尝试在由jquery .load函数加载的内容中加载jquery内部淡化函数,我看到很多类似于此的主题但是因为我对javascript很新,所以无法得到正确的解决方案。

这是我用来加载内容的脚本:

$(document).ready(function() {  

// Check for hash value in URL  
var hash = window.location.hash.substr(1);  
var href = $('.nav li a').each(function(){  

    var href = $(this).attr('href');  
    if(hash==href.substr(0,href.length-5)){  
        var toLoad = hash+'.php #content';  
        $('#content').load(toLoad)
    }  
});  

$('.nav li a').click(function(){  

var toLoad = $(this).attr('href')+' #content';  
$('#content').hide('fast',loadContent);  


$('#load').remove();  
$('#sub_corpo').append('<span id="load">sto caricando il contenuto...</span>');  
$('#load').fadeIn('normal');  
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);  



function loadContent() {  
    $('#content').load(toLoad,'',showNewContent())  

}  
function showNewContent() {  
    $('#content').show('normal',hideLoader());  


}  
function hideLoader() {  
    $('#load').fadeOut('normal');  
}  
return false;  

});  

});

这是内部淡化功能:

<script >
function(){

$('#slideshow').innerfade({
        speed: 4500,
        timeout: 6000,
        type: 'sequence',
        containerheight: '480px'
        });
}
</script>

我不知道如何在加载内容时调用此函数。我非常感谢你的建议。

Dimtiri

2 个答案:

答案 0 :(得分:0)

这应该是答案:

$('#content').load(toLoad, function() {
  $('#slideshow').innerfade({
        speed: 4500,
        timeout: 6000,
        type: 'sequence',
        containerheight: '480px'
        });
});

答案 1 :(得分:0)

谢谢你的建议,我已经测试了它,但似乎没有用。 这是新的最终jquery代码:

$(document).ready(function() {  

// Check for hash value in URL  
var hash = window.location.hash.substr(1);  
var href = $('.nav li a').each(function(){  

    var href = $(this).attr('href');  
    if(hash==href.substr(0,href.length-5)){  
        var toLoad = hash+'.php #content';  
        $('#content').load(toLoad, function() {
        $('#slideshow').innerfade({
        speed: 4500,
        timeout: 6000,
        type: 'sequence',
        containerheight: '480px'
        });
        });
    }  
});  

$('.nav li a').click(function(){  

var toLoad = $(this).attr('href')+' #content';  
$('#content').hide('fast',loadContent);  


$('#load').remove();  
$('#sub_corpo').append('<span id="load">sto caricando il contenuto...</span>');  
$('#load').fadeIn('normal');  
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);  



function loadContent() {  
    $('#content').load(toLoad,'',showNewContent())  

}  
function showNewContent() {  
    $('#content').show('normal',hideLoader());  


}  
function hideLoader() {  
    $('#load').fadeOut('normal');  
}  
return false;  

});  

});

只是为了提供更多信息,这是应该通过jquery加载到“content”div中的页面代码:

    <div id="content">
<div class="sub_corpo">
<div class="sub_sinistra">

<div id="slideshow">

<?php

$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_mime_type' => 'image',
'post_status' => null,
'post_parent' => $post->ID
);
$images = get_posts( $args );
foreach($images as $image):
echo wp_get_attachment_image($image->ID, 'full');
endforeach; ?></div>



<h1>Lunarossa vini e passione</h1>
<p>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</p>
</div>
<div class="sub_destra"><img src="http://www.viniepassione.it/wp-content/uploads/2011/09/parco.jpg" alt="Monti Picentini" />
<h1>&nbsp;</h1>
<p>I monti piacentini sono un gruppo montuoso dell'Appennino campano. I Monti picentini sono una terra il cui carattere morfologico &egrave; rimasto immutato nel tempo, cos&igrave; come le tipicit&agrave; gastronomiche, dalla nocciola Tonda di Giffoni al''olio delle colline salernitane ottenuto dalla spremitura dell'oliva Rotondella. Nel &quot;Parco regionale dei piacentini&quot; ricadono due oasi WWF, quella del monte Accellica e quella del Polveracchio.
</p>
</div>
</div>
</div>

感谢您的时间和帮助