Aide avec jquery animate()

Question

J'utilise ce code pour changer l'opacité quand l'utilisateur est sur et hors de l'image malheureusement quand l'utilisateur clique sur l'image l'opacité ne reste pas à 1. N'importe qui 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ésactiver l'animation en quelque sorte mouseleave lorsque l'utilisateur clique.

Une approche courante consiste à ajouter une classe et à faire vérifier par mouseleave 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"); 
    }); 
}); 

EDIT:

Si vous voulez un second clic pour revenir le comportement à l'original, 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

Vous avez juste besoin de suivre si elle a été cliqué ou non. Vous pouvez le faire de plusieurs façons, mais puisque vous n'avez qu'un seul élément que vous suivez, 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 changé votre sélecteur pour être plus efficace. #slide est mieux que img#slide depuis 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 dans ce fil sont bonnes, et travailleraient. Mais pour le plaisir, voici une approche différente. En fonction de votre code et de votre question, ce que vous êtes en train de faire est de supprimer le comportement du pointeur 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'); 
    }); 
}); 

qui peut être refactorisé pour permettre le basculement du comportement d'une manière nouvelle:

$(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(); 

}); 

Note: Je n'ai pas testé (je suis au travail), mais vous avez l'idée.