Problème jQuery/CSS 3

Bonsoir,

J'ai actuellement un petit souci avec l'utilisation de jQuery et de CSS 3...
Je développe une web app pour iPhone et je veux profiter de cette opportunité pour utiliser au maximum le CSS 3.

Ce que je cherche à faire pour en ce moment est un effet de translation et d'agrandissement lorsque l'on clique sur une image. Le problème que je rencontre c'est qu'il me fait bel et bien l'animation lors du premier clic mais qu'il ne fait plus rien au deuxième clic sur l'image.

L'animation est entièrement créée en CSS 3 et elle fonctionne bien, c'est donc avec jQuery que j'ai un problème. Mon script est tout simple, il permet de modifier l'ID de l'image lors du clic. Il effectue correctement l'évènement au premier mais pour la suite j'ai l'impression que jQuery ne prend pas le changement d'ID en compte...
Comme s'il n'exécute qu'une seule fois le script, est-ce normal ?

Voilà le script en question :

$(document).ready(function(){
var $img1 = $('#img1');
var $img1focus = $('#img1-focus');

$img1.click(function(){
$img1.attr({
id: 'img1-focus'
});
});
$img1focus.click(function(){
$img1focus.attr({
id: 'img1'
});
});
})

Merci d'avance

Hello,

Mets plutôt ton code entre les balises faites pour ça, ce sera plus lisible.

Pour ton problème, .click() ne capture que les éléments présents dans le DOM.
Vu que tu changes l'id de ton élément, le 2e événement ne se fait jamais car il n'existe pas au moment où le navigateur scanne la page.

Pour palier à ça, il faut utiliser la fonction live() de jQuery.

$(document).ready(function(){
var $img1 = $('#img1');
var $img1focus = $('#img1-focus');

$img1.live('click', function(){
     $img1.attr({
          id: 'img1-focus'
     });
});

$img1focus.live('click', function(){
     $img1focus.attr({
          id: 'img1'
     });
});
});

Mais à ta place, je créerais une classe pour l'état over et l'état non hover et utiliserais les fonctions addClass('maClasse') et removeClass('maClasse') de jQuery, ça me semble plus adapté.

Effectivement je n'avais pas pensé à utiliser addClass et removeClass.
Il est certain que cette méthode est plus appropriée, merci beaucoup !