Discussion :

[ggerico]

Bonjour,

je débute dans jquery world et j'ai une question à propos du fonctionnement de jquery et du css:

Dans l'exemple A Simple jQuery Slideshow de Jon Raasch (http://jonraasch.com/blog/a-simple-jquery-slideshow#) si je m'amuse à intervertir l'ordre des 2 dernières déclarations css comme ceci :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
#slideshow {
    position:relative;
    height:350px; /* Due to absolute positioning, we need to define the height of the slideshow DIV. */
}
 
#slideshow img {
    position:absolute;
    top:0;
    left:0;
    z-index:8; /* notice that we defined three different z-indexes—we will manipulate these soon using jQuery, see also below */
}
 
#slideshow img.last-active {
    z-index:9;
}
 
#slideshow img.active { 
    z-index:10;
}

Le slideshow fonctionne mais lors du retour à la première image il n'y a plus d'effet fade. Mais pourquoi donc?!

Ce n'est pas la seule fois que je suis tombé sur ce genre de problème; jusqu'à présent je tatonne en modifiant l'ordre des déclarations css mais sans vraiment savoir ce que je fais.

D'une manière plus général donc, je voudrais savoir comment fonctionne jquery selon l'ordre des déclérations css.

Merci,
ggerico.

[SpaceFrog]

les propriétés de style sont appliquées dans l'ordre du flux ...
Modifier l'ordre de declaration peut modifier le rendu final et modifier les action de jquery qui peuvent se baser sur un style effectif au niveau des selecteurs

[eckerdecker]

Bonjour

jQuery n'a aucune influence sur l'ordre dans lequel tu déclares tes css.

Le seule chose que tu peux avoir besoin de savoir c'est que les deux classes "last-active" et "active" peuvent éventuellement être données à une même <img> auquel cas c'est la dernière déclarée qui fait loi.

Pour prévoir le cas tu peux ajouter

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
#slideshow img.active.last-active { 
  ...
}

Mais gare aux vieilles versions d'IE

[ggerico]

ok je viens de comprendre !

En intervertissant l'ordre des 2 dernières classes, l'application de la classe 'last active' à l'image précédente ayant déjà la classe 'active' ne produit aucun effet, la valeur de son z-index demeurant 10.

L'ajout de la classe 'active' à l'image suivante donne donc 2 images avec une valeur de z-index de 10. Comme le dit Jon Raasch ''through absolute positioning, the last image appears on top'' par conséquent l'image suivante est positionné au dessus de l'image précédente dans la pile d'images et selon l'animate() elle apparaîtra à l'écran.

Ce qui n'est pas le cas lors du loop où l'image suivante précède l'image précédente dans le code html. Par conséquent à z-index égaux l'image précédente se trouve cette fois au dessus de l'image suivante dans la pile d'images, l'animate() s'execute sur l'image suivante mais n'apparaît pas à l'écran (cachée par l'image précédente) et ce n'est que le callback de l'animate()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });

qui fait disparaître l'image précédente via le removeClass() et apparaître enfin l'image suivante avec un facheux flicker. CQFD!

merci pour vos réponses qui m'ont mis sur la bonne voie.