Jwalk Demo

一个简单的Demo，可以按照不同的顺序执行以查看不同方法的效果。

Script Code：

为了避免冲突，toggle/show/hide/extend都是新的实例，所以pause/stop/reset等方法对这里的动画是无效的。

var $ = function(id){ return document.getElementById(id) || id }, circle = $('circle'), Star, newStar;
Star = Jwalk(circle,{interval:1000}).animate({left:'120px',top:'30px',backgroundColor:'#A4D3EE'})
	.animate({left:'220px',top:'120px',backgroundColor:'#FF7F00'})
	.animate({left:'170px',top:'220px',backgroundColor:'#2E8B57'})
	.animate({left:'70px',top:'220px',backgroundColor:'#DB7093'})
	.animate({left:'20px',top:'120px',backgroundColor:'#DB4F33'});

newStar = Jwalk(circle,{interval:500});
newStar.extend({
	flicker : function(){
		newStar.init();
		newStar.animate({opacity:'0'}).animate({opacity:'1'}).cycle();
	}
});

function play(){
	Star.play();
};
function replay(){
	Star.replay();
};
function pause(){
	Star.pause();
};
function stop(){
	Star.stop();
};
function cycle(){
	Star.cycle();
};
function stepPlay(){
	Star.step(1,3,0,2,4).play();
};
function reset(){
	Star.reset();
};
function show(){
	Jwalk(circle).show();
};
function hide(){
	Jwalk(circle).hide();
};
function show(){
	Jwalk(circle).show();
};
function toggle(){
	Jwalk(circle).toggle();
};
function extend(){
	newStar.flicker();
}; 

在Method页面用到了好几个slideToggle的效果，下面贴下代码：

var $ = function(id){ return document.getElementById(id) || id };
function openHide(elem,actId){
	//elem为当前对象，actId为作用对象的id
	var codeObj = Jwalk($(actId));
	elem.value == '展开代码' ?
	codeObj.slideDown(function(){
		elem.value = '关闭代码';
	}) :
	codeObj.slideUp(function(){
		elem.value = '展开代码';
	}) ;
}; 

首先用css将代码部分隐藏，如果需要哪个按钮进行控制，给按钮添加onclick="openHide(this,相应事件的对象ID)"事件即可。