jak działa jadeery fadeIn? Robiąc to samo z animacją()

Uwielbiam prostą funkcję jQuery fadeIn(), zwłaszcza, że działa bez konieczności ustawiania wartości nieprzezroczystości w selektorze! Ustawienie go na display:none i użycie fadeIn() zawsze działa.jak działa jadeery fadeIn? Robiąc to samo z animacją()

Jednak nie używam jQuery do mojego bieżącego projektu, ale zepto.js. Zepto występuje tylko z animate(), a nie z fadeIn().

Zastanawiam się, jak mogę stworzyć to samo zachowanie przy użyciu funkcji animacji! Jakie właściwości mam tutaj animować?

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

góry dziękuję

Źródło

2012-08-02 matt

Opcja '.fadeIn()' funkcja prawdopodobnie właśnie nazywa jQuery '.animate () 'function, więc spróbuj poszukać go w kodzie [jQuery] (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)

Jeśli Zepto działa jak jQuery $('.example').fadeIn(); powinno załatwić sprawę.

EDYCJA: Trejder ma rację, dostosował części.

Źródło

2012-08-02 12:48:36 Sem

Twoje rozwiązanie wygląda świetnie, ale zgodnie z tym, co przeczytałem na temat Javascript, powinieneś raczej użyć 'typeof (ms) === 'undefined'', a nie' ms == undefined', ponieważ nie ma takiego słowa kluczowego jak 'undefined 'w JS i to (w niektórych sytuacjach) może być nawet zmienną o wartości! – trejder

I - oczywiście! - 'display: 'block',', not 'display: block,', jako 'block' jest tutaj niezdefiniowaną (sic!) zmienną! – trejder

@trejder naprawił to! :) – Sem

Funkcja jQuery fadeIn jest tylko skrót do jQuery funkcja animowanie. Wszystko to zmienia nieprzezroczystość od 0 do 1 przez pewien czas, zwiększając wartość krycia.

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

Źródło

2012-08-02 12:43:06 Stieffers

-1

możesz tego spróbować. Zrobiłem małe demo. musisz ustawić jego przezroczystość 0, a następnie sprawić, by był wyświetlany: blok, a następnie animuj przezroczystość.

check to skrzypce http://jsfiddle.net/dTRhQ/

jednak, że odbywa się to w JQ, mam nadzieję, że można znaleźć odpowiednie wdrożenie w ramach

Źródło

2012-08-02 13:17:18 Shades88

jak działa jadeery fadeIn? Robiąc to samo z animacją()

Odpowiedz

Powiązane problemy