11499 sujets

JavaScript, DOM et API Web HTML5

Problème avec mon Ajax Slide & Fade Content with jQuery

Bonjour tout le monde,

Sur ce slide je voudrais enlever l'effet de fadeIn et avoir à la place un slideToggle pour qu'on puisse à chaque clic l'ouvrir et le fermer.

J'ai essayée mais, ça ne fonctionne pas alors Si une personne a une idée !

Merci beaucoup.

[code / Fichier: index.html]
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Demo: jQuery Slide &amp; Fade Content v2.0 - Perishable Press</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="css/styles.css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="slide-fade-content.js"></script>
</head>
<body>
<header>
<h1>Jquery Slide Fade Content</h1>
</header>

<div id="ajax"></div>
<ul>
<li><a class="more" href="#first-item">First Item</a></li>
<li><a class="more" href="#second-item">Second Item</a></li>
<li><a class="more" href="#third-item">Third Item</a></li>
</ul>
</body>
</html>
[/code]

[code / Fichier : content.html]
<div id="load">
<div id="first-item">
<p>Liste 1</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
</div>
<div id="second-item">
<p>Liste 2</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
</div>
<div id="third-item">
<p>Liste 3</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
</div>
</div>
[/code]


header{
width: 100%; height: 30px; background: #1a1919; text-align: center; color: #fafafa; text-transform: uppercase; font-size: 14px; 
}
.loader { 
border: 0 none; float: left; clear: both; margin: 100px 0 0 200px; 
}




jQuery(document).ready(function($) {
	$('.more').on('click', function() {
		var href = $(this).attr('href');
		if ($('#ajax').is(':visible')) {
			$('#ajax').css({ display:'block' }).animate({ height:'0' }).empty();
		}
		$('#ajax').css({ display:'block' }).animate({ height:'200px' },function() {
			$('#ajax').html('<img id="loader" src="loader.gif">');
			$('#loader').css({ border:'none', position:'relative', top:'24px', left:'48px', boxShadow:'none' }); //  http://loadinfo.net/
 
			$('#ajax').load('content.html ' + href, function() {
				$('#ajax').hide().fadeIn('slow').colorFade({ 'fadeColor': 'rgb(253,253,175)' });
			});
		});
	});
});
Sujet clos
Aller à