Comment puis-je réécrire des effets simples fadeIn(), fadeOut(), slideUp(), slideDown() à l'aide d'animer ({})?

Question

Je ne comprends pas pourquoi cela ne fonctionne pas maintenant. J'écris:

$(function() { 
    $('a').click(function(){ 
     $('div#box').animate({ 
      opacity: 1 
     }); 
    }); 
}); 

div { 
    width: 250px; 
    height: 250px; 
    background-color: #000040; 
    display: none; 
} 

et ce n'est pas fadeIn(). Comment puis-je faire ces choses simples?

Answer 1

EDIT: Alors que les travaux ci-dessous, regardant la source jQuery révèle que cela est beaucoup plus facile:

$(function() { 
    $('a').click(function(){ 
     $('#box').animate({ 
      opacity: "show" 
     }); 
     return false; 
    }); 
}); 

Voici la partie pertinente de la source jQuery, qui définit ces slideDown/Up/Bascule et/fadeIn des fonctions:

// Generate shortcuts for custom animations 
jQuery.each({ 
    slideDown: genFx("show", 1), 
    slideUp: genFx("hide", 1), 
    slideToggle: genFx("toggle", 1), 
    fadeIn: { opacity: "show" }, 
    fadeOut: { opacity: "hide" } 
}, function(name, props){ 
    jQuery.fn[ name ] = function(speed, callback){ 
     return this.animate(props, speed, callback); 
    }; 
}); 

---

La règle CSS "display: none" ne signifie pas qu'il est transparent, cela signifie qu'il est pas affiché du tout. Vous devez définir l'affichage sur block, puis animer. Vous voulez probablement revenir false dans la fonction de clic, de sorte que le lien ne se termine pas en prenant l'utilisateur vers une autre page (ou vous pouvez simplement définir l'attribut href à « # », que vous pouvez déjà faire).

$(function() { 
    $('a').click(function(){ 
     $('#box').css('opacity', '0'); 
     $('#box').css('display', 'block'); 
     $('#box').animate({ 
      opacity: 1 
     }); 
     return false; 
    }); 
});