DSsys DSsys i skrypty JavaScript są miłe!

(akt. wer. 1.1.1)

Lista funkcji

Kategorie

Składnia

info WSKAZÓWKA!

Funkcja dostępna jedynie od wersji 1.1.0 i w nowym dostępie przez ds(slektor) lub DSsys.x(selektor)


void funkcja DSsys.x(selektor).fx ( object zmn [, int czas = 400 [, function funkcja = undefined ]] )
void funkcja ds(selektor).fx ( object zmn [, int czas = 400 [, function funkcja = undefined ]] )

Tworzy animacje wybranych właściwości na wybranych elementach.

Kategoria: Obsługa

Lokalizacja: rdzen/x.js

Opis

Tworzy animacje wybranych właściwości na wybranych elementach.

Parametry

object el

Referencja do elementu.

object zmn

Obiekt, który jest zestawem atrybutów do animacji wraz wartościami.

Zapis atrybut:=+wartosc lub atrybut:=-wartosc oznacza względne wartości.

int czas = 400

Czas jaki zajmie cała animacja [ms].

function funkcja = undefined

Funkcja, która ma się wykonać bezpośrednio po zakończeniu animacji dla każdego elementu poddanego animacji z osobna.

Przykłady

#1 Prosta animacja z kolejkowaniem oraz możliwością zatrzymania. zapisz zapiszZIP

CSS:

#diw-anim {
height: 111px;
position: relative;
}
#anim {
height: 50%;
width: 20%;
background-color: red;
position: absolute;
left: 0;
top: 0;
}

Przykład:

DSsys.start(['o.doklej.js']);
DSsys.ladowanie.dodAuto(function() {

  ds('#btn-anim').on('click',function() {
    var el = ds('#anim');
    el.fx({width:'100px',left:'=+110px',opacity:'0.4'},1000);
    el.fx({top:'=+110px',opacity:'1'},2000);
    el.fx({left:'=+100px'},1000);
  });
  ds('#btn-anim_stop').on('click',function() {
    ds('#anim').fxStop();
  });

});

HTML:

<div id="diw-anim">
<div id="anim"></div>
</div>
<input type="button" id="btn-anim" value="Animacja" />
<input type="button" id="btn-anim_stop" value="Animacja STOP" />

#2 Animacja z efektem przenikania. zapisz zapiszZIP

CSS:

#anim-hover {
height: 100px;
width: 100px;
background-color: blue;
}

Przykład:

DSsys.start(['o.doklej.js']);
DSsys.ladowanie.dodAuto(function() {

  ds('#anim-hover').on('mouseover',function(e) {
    ds(e.elmn).fxStop(true).fx({opacity:0.5});
  });
  ds('#anim-hover').on('mouseout',function(e) {
    ds(e.elmn).fxStop(true).fx({opacity:1});
  });

});

HTML:

<div id="anim-hover"></div>

Historia

Wersja Zmiana
1.1.0 Dodano funkcję.

Podobne

DSsys.x().fxStop - Powoduje natychmiastowe przerwanie bieżącej animacji.

Aktualna wersja: 1.1.1

* * *
© <^> 2012-2014

Projekt i wykonanie: DrezynSoft


Partner Autorska witryna kolejowa Partner DrezynSoft Partner Fotograficzna galeria krajobrazów Partner FotoStacyjka
Partner SelekTTor Partner Mapy Partner Edytor XML Partner Gry Partner Tłumacz Partner DSsys
Partner MojaMuzyka Partner Kanał Ostródzko-Elbląski w obiektywie <^> Partner Konwerter tekstu

Podstronę załadowano w 0.0173 sekundy.