Aide avec jquery animate()

Question

J'utilise ce code pour changer l'opacité lorsque l'utilisateur est sur et hors d'une image, malheureusement lorsque l'utilisateur clique sur l'image l'opacité ne reste pas à 1. Quelqu'un a une réponse ?

$(document).ready(function(){

  $('img#slide').animate({"opacity" : .7})
  $('img#slide').hover(function(){
      $(this).stop().animate({"opacity" : 1})
  }, function(){
      $(this).stop().animate({"opacity" : .7})

  });                

  $('img#slide').click(function(){
    $(this).animate({"opacity" : 1});
  });

});

Answer 1

Vous devez d'une manière ou d'une autre désactiver le mouseleave animation lorsque l'utilisateur clique.

Une approche courante consiste à ajouter une classe, et à faire en sorte que l'option mouseleave vérifier l'existence de la classe.

Testez l'exemple en direct : http://jsfiddle.net/KnCmR/

$(document).ready(function () {

    $('img#slide').animate({ "opacity": .7 })

    .hover(function () {
        $(this).stop().animate({ "opacity": 1 })
    }, 
    function () {
        if ( !$(this).hasClass("active") ) {
            $(this).stop().animate({ "opacity": .7 });
        }
    })

    .click(function () {
        $(this).addClass("active");
    });
});

EDITAR:

Si vous souhaitez qu'un deuxième clic permette de rétablir le comportement d'origine, utilisez toggleClass() au lieu de addClass() :

        $(this).toggleClass("active");

---

Docs jQuery :

• .hasClass() - http://api.jquery.com/hasClass
• .addClass() - http://api.jquery.com/addClass
• .toggleClass() - http://api.jquery.com/toggleClass

Answer 2

Il vous suffit de savoir si vous avez cliqué ou non. Vous pouvez le faire de plusieurs façons, mais comme vous n'avez qu'un seul élément à suivre, une variable est le moyen le plus simple de le faire. J'ai également optimisé votre code pour utiliser le chaînage. J'ai également modifié votre sélecteur pour qu'il soit plus efficace. #slide est meilleur que img#slide puisqu'un id est censé être unique :

$(document).ready(function(){
  var clicked = false;

  $('#slide')
    .animate({"opacity" : 0.7})
    .hover(function(){
      if(!clicked) {
        $(this).stop().animate({"opacity" : 1});
      }
    }, function(){
      if(!clicked){
        $(this).stop().animate({"opacity" : 0.7});
      }
    })
    .click(function(){
        clicked = true;
    });
});

Answer 3

Toutes les réponses de ce fil de discussion sont bonnes et pourraient fonctionner. Mais pour le plaisir de le faire, voici une approche différente.

D'après votre code et votre question, ce que vous faites en fait, c'est supprimer le comportement de survol de l'élément. Ce qui devrait être fait comme ci-dessous :

$(document).ready(function(){

  $('img#slide').animate({"opacity" : .7});

  $('img#slide').hover(function(){
      $(this).stop().animate({"opacity" : 1});
  }, function(){
      $(this).stop().animate({"opacity" : .7});
  }); 

  $('img#slide').click(function(){
    $(this).unbind('hover');
  });
});

Ce qui peut être remanié pour permettre de changer de comportement d'une manière originale :

 $(document).ready(function(){

  var over = function(){
   $('img#slide').stop().animate({"opacity" : 1});
  };

  var out = function(){
   $('img#slide').stop().animate({"opacity" : 0.7});
  };

  var on = function(){
   $('img#slide').hover(over, out).one('click', off);
  }

  var off = function(){
   $('img#slide').unbind('hover').one('click', on);
  };

  $("img#slide").one('click', on);

  out.call();

 });

Remarque : je n'ai pas testé cette méthode (je suis au travail), mais vous voyez l'idée.