jQuery attr() changement img src

Je suis en train de faire certains le lancement de fusées effet par jQuery. Quand je clique sur la Fusée, il va échanger avec un autre fusée de l'image, puis le lancer. Lorsque je clique sur "Réinitialiser" le lien, la Roquette devez réinitialiser à partir de l'emplacement et de l'image doit revenir. Mais il y a deux problèmes. Tout d'abord, "ma fusée image n'est pas de revenir en arrière". Seconde après elle est revenue à la position initiale, si je clique sur la Roquette encore une fois, ce n'est pas de se lancer. Pouvez-vous voir et de trouver des solutions de moi?

http://jsfiddle.net/thisizmonster/QQRsW/

$("#resetlink").click(function(){
    clearInterval(timerRocket);
    $("#wrapper").css('top', '250px');
    $("#rocket").attr('src', 'http://www.kidostore.com/images/uploads/P-SAM-rocket-blk.jpg');
});

Vous pouvez voir $("rocket").attr() à la ligne.

OriginalL'auteur Gereltod | 2011-05-13

  1. 9

    Vous de supprimer l'image originale ici:

    newImg.animate(css, SPEED, function() {
    img.remove();
    newImg.removeClass('morpher');
    (callback || function() {})();
});

    Et tout ce qui est laissé derrière est newImg. Ensuite, vous lien de réinitialisation de références de l'image à l'aide de #rocket:

    $("#rocket").attr('src', ...

    Mais votre newImg n'a pas de id attribut laisser seul un id de rocket.

    Pour résoudre ce problème, vous devez supprimer img et puis définissez la id attribut de newImg à rocket:

    newImg.animate(css, SPEED, function() {
    var old_id = img.attr('id');
    img.remove();
    newImg.attr('id', old_id);
    newImg.removeClass('morpher');
    (callback || function() {})();
});

    Et vous obtiendrez alors le noir brillant fusée une fois de plus: http://jsfiddle.net/ambiguous/W2K9D/

    Mise à JOUR: UNE meilleure approche (comme indiqué par mellamokb) serait de masquer l'image originale, puis l'afficher à nouveau lorsque vous appuyez sur le bouton de réinitialisation. D'abord, changer la remise à zéro à quelque chose comme ceci:

    $("#resetlink").click(function(){
    clearInterval(timerRocket);
    $("#wrapper").css('top', '250px');
    $('.throbber, .morpher').remove(); //Clear out the new stuff.
    $("#rocket").show();               //Bring the original back.
});

    Et dans le newImg.load fonction, de saisir les images en taille originale:

    var orig = {
    width: img.width(),
    height: img.height()
};

    Et enfin, la fonction de rappel pour la finition de l'animation de morphing devient:

    newImg.animate(css, SPEED, function() {
    img.css(orig).hide();
    (callback || function() {})();
});

    Nouveaux et améliorés: http://jsfiddle.net/ambiguous/W2K9D/1/

    La fuite de $('.throbber, .morpher') l'extérieur du plugin n'est pas la meilleure chose jamais, mais ce n'est pas une grosse affaire tant qu'il est documenté.

    +1 me Battre pour elle. Je pense que l'OP doit masquer l'ancienne image au lieu de la supprimer, puis remis à zéro par newImg.remove() et img.show().
    Cacher #rocket serait mieux que vous n'auriez pas à vous soucier de transfert de la id ou de reliaison des gestionnaires d'événements.
    Ce qu'il manque avec ma version modifiée? Je sais que vous perdez le gestionnaire de clic, est-il autre chose? Et la taille ne sont pas réinitialisés.
    J'ai fait quelques modifications (masquer l'origine, supprimer les nouveaux trucs, restaurer la taille d'origine): jsfiddle.net/ambiguous/W2K9D/1
    Il reste juste un problème mineur. Si vous touchez réinitialiser très vite, avant la fin de la transformation, cela ne fonctionnera pas correctement. L'essayer pour voir ce que je veux dire, l'image d'origine grandit en taille, puis disparaît complètement.

    OriginalL'auteur mu is too short

  2. 3

    1. Fonction imageMorph va créer un nouvel élément img, par conséquent, le code est supprimé.
      Changé à

      $("#wrapper > img")

    2. Vous devez utiliser live() la fonction pour l'événement click si vous le souhaitez, vous fusée lanch de nouveau.

    Mise à jour de la démo: http://jsfiddle.net/ynhat/QQRsW/4/

    OriginalL'auteur YNhat