Hacking at 0300

Updated for jQuery UI 1.8 and cycle 2.81, but it doesn't work so well anymore

The alert reader will notice that the parameters for the transition animation for my flexcal widget are the same as that used by Mike Alsup's cycle plugin. My hope was that I could use { transition: $.fn.cycle.next } and be able to use all those cool effects. It turned out to be not so simple; I couldn't jump into the middle of his code and have things work. But I could create a function that set things up correctly and called his transition code:

// largely copied from the $.fn.cycle code
function cycle(opts) {
	var curr = opts.elements.eq(opts.currSlide), next = opts.elements.eq(1-opts.currSlide), fwd = !(opts.rev ^ opts.l10n.isRTL);
	opts.lastSlide = opts.currSlide; // shuffle needs to know this
	opts.slideCount = 2;
	opts.cssAfter = { left: 0, top: 0 , opacity: 1};
	opts.cssBefore = opts.animIn = opts.animOut = {};
	opts.speedIn = opts.speedIn || opts.speed,
	opts.speedOut = opts.speedOut || opts.speed,
	opts.easeIn = opts.easeIn || opts.easing,
	opts.easeOut = opts.easeOut || opts.easing;
	$.fn.cycleW = opts.$cont.width(); $.fn.cycleH = opts.$cont.height(); // hack to fool the cycle transitions
	$.fn.cycle.transitions[opts.fx](opts.$cont, opts.elements, opts); // set up the transition. fx must be a valid transition name
	$.each(opts.before, function(i,o) {
		o.apply(next, [curr, next, opts, fwd]);
	});
  // stage the after callacks
	var after = function() {
		$.each(opts.after, function(i,o) {
			o.apply(next, [curr, next, opts, fwd]);
		});
	};

	if (opts.fxFn){ // fx function provided?
		opts.fxFn(curr, next, opts, after, fwd);
	}else{
		next.css(opts.cssBefore);
		var fn = function() {
			next.animate(opts.animIn, opts.speedIn, opts.easeIn, after)
		};
		curr.animate(opts.animOut, opts.speedOut, opts.easeOut, function() {
			curr.css(opts.cssAfter);
			if (!opts.sync) fn();
		});
		if (opts.sync) fn();
	}
};

Now I can use any of the transitions and easing functions (with some attention paid to the options, since we don't start with the correct defaults):

	<span>Cycle transitions and easing: </span><input id="flexcalcycle"/>

var opts = {
	position: 'bl',
	transition: cycle,
	transitionOptions: {fx: 'fade', sync: true, speed: 1000}
};
$('#flexcalcycle').flexcal(opts);

var easingSelect = $('<select>').insertAfter('#flexcalcycle').bind('change', function(){
	opts.transitionOptions.easing = $(this).val();
	$('#flexcalcycle').flexcal('destroy').flexcal(opts).flexcal('show');	
});
for (var e in $.easing){
	easingSelect.append($('<option>').text(e));
};
var fxSelect = $('<select>').insertAfter('#flexcalcycle').bind('change', function(){
	opts.transitionOptions.fx = $(this).val();
	$('#flexcalcycle').flexcal('destroy').flexcal(opts).flexcal('show');	
});
for (var t in $.fn.cycle.transitions){
	fxSelect.append($('<option>').text(t));
};