Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript
JavaScript Forum programmation JavaScript. Lire : Cours JavaScript, FAQ JavaScript, Toutes les FAQ JavaScript et Sources JavaScript
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
'
Vieux 01/03/2011, 16h38   #1
Invité de passage
 
Inscription : mars 2011
Messages : 2
Détails du profil
Informations forums :
Inscription : mars 2011
Messages : 2
Points : 0
Points : 0
Par défaut Transition et opacité

Bonjour à tous,

J'ai récupéré et adapté un script me permettant de faire une galerie avec transition d'image.
Ma question est la suivante, actuellement la transition ce fait avec un fondu au noir ... et j'aimerais une transition entre les deux images de façon fluide.

Je copie mon code si quelqu'un a une idée pour m'aider.
Merci

Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$(document).ready(function() {	
	//Show Banner
	$(".main_image .desc").show(); //Show Banner
	$(".main_image .block").animate({ opacity: 0.50 }, 1 ); //Set Opacity
    $(".main_image .blocimage").fadeIn(500);
	//Click and Hover events for thumbnail list
	$(".image_thumb ul li:first").addClass('active'); 
	$(".image_thumb ul li").click(function(){ 
		return false;
	}) 
	$(".image_thumb ul li").hover(function(){ 
		//Set Variables
		var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
		var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
		var imgDesc = $(this).find('.block').html(); 	//Get HTML of block
		var imgDescHeight = $(".main_image").find('.block').height();	//Calculate height of block	
		if ($(this).is(".active")) {  //If it's already active, then...
			return false; // Don't click through
		} else {
			//Animate the Teaser
				$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 500 , function()
					{
						$(".main_image .block").html(imgDesc).animate({ opacity: 0.50,	marginBottom: "0" }, 500 );
						$(".main_image img").attr({ src:imgTitle,alt: imgAlt});
						$(".main_image img").css("display", "none");
						$(".main_image img").fadeIn(500);
					});
			}
		$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
		$(this).addClass('active');  //add class of 'active' on this list only
		return false;
	}) 
});//Close Function
ulkakine est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 01/03/2011, 16h54   #2
Rédacteur/Modérateur
 
Avatar de SpaceFrog
 
Homme
Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Inscription : mars 2002
Messages : 30 007
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : Royaume-Uni

Informations professionnelles :
Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Secteur : Industrie

Informations forums :
Inscription : mars 2002
Messages : 30 007
Points : 45 091
Points : 45 091
y'a pas ça dans les contributions ???
sinon il existe un addon jquery qui gère très bien la chose ... : jquery cycle
__________________
Ma page Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag


réalisations :www.planet-languages.com|www.saftair.com| www.ouestisol.fr | www.sebemex.fr | www.extramiante.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
SpaceFrog est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 01/03/2011, 17h21   #3
Responsable Développement Web

 
Avatar de Bovino
 
Homme Didier Mouronval
Développeur Web
Inscription : juin 2008
Messages : 13 805
Détails du profil
Informations personnelles :
Nom : Homme Didier Mouronval
Âge : 41
Localisation : France, Gironde (Aquitaine)

Informations professionnelles :
Activité : Développeur Web
Secteur : High Tech - Éditeur de logiciels

Informations forums :
Inscription : juin 2008
Messages : 13 805
Points : 35 807
Points : 35 807
Citation:
Envoyé par SpaceFrog
y'a pas ça dans les contributions ???
Si si
[SRC] Fondu enchainé
__________________
Pas de question technique par MP !
Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi !
Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
Mon livre sur jQuery
Bovino est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 01/03/2011, 17h26   #4
Invité de passage
 
Inscription : mars 2011
Messages : 2
Détails du profil
Informations forums :
Inscription : mars 2011
Messages : 2
Points : 0
Points : 0
Merci pour vos réponses (super rapide d'ailleurs) mais comme mon script de galerie est déjà existant je sais pas trop comment le modifier pour arriver à ce type de résultat ...
ulkakine est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité
Outils de la discussion



Fuseau horaire GMT +2. Il est actuellement 14h47.


 
 
 
 
Partenaires

Hébergement Web