Wie kann ich einfache Effekte fadeIn(), fadeOut(), slideUp(), slideDown() mit animate ({}) umschreiben?

Question

Ich kann nicht verstehen, warum es jetzt nicht funktioniert. Ich schreibe:

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

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

und es ist nicht fadeIn(). Wie kann ich diese einfachen Dinge tun?

Answer 1

EDIT: Während der unten angegebenen Arbeiten, zeigt auf der jQuery Quelle suchen, dass diese viel einfacher ist:

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

Hier ist der relevante Teil der jQuery Quelle ist, dass diese slidedown/Up/Toggle definiert und fadeIn/Out-Funktionen:

// 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); 
    }; 
}); 

---

Die CSS-Regel "display: none" bedeutet nicht, es transparent ist, bedeutet dies, es ist überhaupt nicht angezeigt. Sie müssen die Anzeige auf block setzen und dann animieren. Wahrscheinlich möchten Sie false in der Klick-Funktion zurückgeben, damit der Link den Benutzer nicht zu einer anderen Seite führt (oder Sie können einfach das href-Attribut auf "#" setzen, was Sie möglicherweise bereits tun).

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