Wie funktioniert jquery fadeIn? Das gleiche mit animate()

Ich liebe die einfache jQuery fadeIn() Funktion, vor allem, weil es funktioniert, ohne irgendwelche Deckkraftwerte auf den Selektor setzen müssen! Setzen Sie es einfach auf display:none und mit fadeIn() funktioniert immer.Wie funktioniert jquery fadeIn? Das gleiche mit animate()

Allerdings verwende ich jQuery nicht für mein aktuelles Projekt, sondern zepto.js. Zepto kommt nur mit animate() und nicht mit fadeIn().

Ich frage mich, wie ich das gleiche Verhalten mit der Animate-Funktion erstellen kann! Welche Eigenschaften muss ich hier animieren?

$('#selector').animate({ 
    display: "block", 
    opacity: 1 
}, 500, 'ease-out')

Vielen Dank im Voraus

Quelle

2012-08-02 matt

Die '.fadeIn()' Funktion wahrscheinlich nur Anrufe der jQuery '.animate () 'Funktion, versuchen Sie es im [jQuery-Code] (http://code.jquery.com/jquery-1.7.2.js). –

(function($){ 
     $.extend($.fn, { 
     fadeIn: function(ms){ 
      if(typeof(ms) === 'undefined'){ 
      ms = 250; 
      } 
      $(this).css({ 
      display: 'block', 
      opacity:0 
      }).animate({ 
      opacity: 1 
      }, ms); 
      return this; 
     } 
     }) 
    })(Zepto)

Wenn Zepto funktioniert wie jQuery $('.example').fadeIn(); den Trick tun sollten.

EDIT: Trejder ist richtig, justiert die Teile.

Quelle

2012-08-02 12:48:36 Sem

Ihre Lösung sieht gut aus, aber nach dem, was ich über Javascript gelesen habe, sollten Sie lieber 'typeof (ms) === 'undefined'' verwenden, nicht' ms == undefined', da es kein solches Schlüsselwort wie 'undefined' gibt 'in JS und das (in bestimmten Situationen) kann sogar eine Variable mit einem Wert sein! – trejder

Und natürlich! - 'display: 'block',', nicht 'display: block,', da 'block' hier eine undefinierte (sic!) Variable ist! – trejder

@trejder repariert es! :) – Sem

Die jQuery fadeIn Funktion auf die jQuery animieren Funktion nur eine Verknüpfung ist. Bei dieser Einstellung wird die Opazität über einen bestimmten Zeitraum von 0 auf 1 geändert, indem der Deckkraftwert erhöht wird.

// 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" }, 
    fadeToggle: { opacity: "toggle" } 
}, function(name, props) { 
    jQuery.fn[ name ] = function(speed, easing, callback) { 
     return this.animate(props, speed, easing, callback); 
    }; 
});

Quelle

2012-08-02 12:43:06 Stieffers

-1

können Sie dies versuchen. Ich habe eine kleine Demo gemacht. Sie müssen die Opazität 0 einstellen und dann anzeigen lassen: Blockieren Sie dann die Opazität.

Kontrolle dieser Geige http://jsfiddle.net/dTRhQ/

jedoch, dass in jq getan wird, ich hoffe, Sie

geeignete Implementierung in Ihrem Rahmen finden

Quelle

2012-08-02 13:17:18 Shades88

Wie funktioniert jquery fadeIn? Das gleiche mit animate()

Antwort

Verwandte Themen