Pluginy efektów w jQuery

Dzięki temu, że metoda animate() zezwala na ustawienie dla atrybutu opacity wartości toggle stworzymy kilka niestandardowych efektów animacji. Uzyskane efekty można zobaczyć tutaj. Na początek stworzymy efekt fadeToggle (płynne toggle). Uzyskamy go w następujący sposób.

jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);
};

Składnia jQuery.fn,oznacza że dołączamy nową metodę do prototypu. W powyższym przykładzie jest to metoda fadeToggle. Zastosowanie powyższego efektu do określonego elementu pokazuje poniższy kod.

$('#fade_toggle').click(function() {
 $('#box1').fadeToggle('slow');
  });

W poniższym listingu zastosujemy wartość toggle dla atrybutów opacity i height. Uzyskamy w ten sposób ciekawy efekt połączenia slide i fade.

jQuery.fn.slidefadeToggle = function(speed, easing, callback) {
  return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};

Teraz stworzymy nieco trudniejszy efekt tzw. bounce. Realizuje go poniższy kod.

jQuery.fn.bounce = function(offset,speed, easing, callback) {
  return this.css('position','relative').animate({top:"-="+offset+"px"},speed, easing, callback).animate({top:"+="+offset+"px"},speed, easing, callback).animate({top:"-="+offset+"px"},speed, easing, callback).animate({top:"+="+offset+"px"},speed, easing, callback).animate({top:"-="+offset+"px"},speed, easing, callback).animate({top:"+="+offset+"px"},speed, easing, callback);
};

Jako parametr offset podajemy wielkość odchylenia w pikselach.