markyun/gist:8192406

## gistfile1.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>简单的jquery插件写法之一</title>
</head>

<body>
<ul id="catagory">
    <li><a href="#">jQuery</a></li>
    <li><a href="#">html5</a></li>
    <li><a href="#">CSS3</a></li>
</ul>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
(function ($) {
    $.fn.extend({
        //插件名称 - paddingList
        paddingList: function (options) {

            //参数和默认值
            var defaults = {
                animatePadding: 10,
                hoverColor: "Black"
            };

            var options = $.extend(defaults, options);

            return this.each(function () {
                var o = options;

                //将元素集合赋给变量 本例中是 ul对象
                var obj = $(this);

                //得到ul中的a对象
                var items = $("a", obj);

                //添加hover()事件到a
                items.hover(function () {
                    $(this).css("color", o.hoverColor);
                    //queue false表示不添加到动画队列中
                    $(this).animate({ paddingLeft: o.animatePadding }, { queue: false, duration: 300 });

                }, function () {
                    $(this).css("color", "");
                    $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 300 });
                });

            });
        }
    });
})(jQuery);


$("#catagory").paddingList(
	{
		animatePadding: 30,
		hoverColor: "Red"
	}
);

</script>
</body>
</html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
	<title>简单的jquery插件写法之一</title>
	</head>

	<body>
	<ul id="catagory">
	<li><a href="#">jQuery</a></li>
	<li><a href="#">html5</a></li>
	<li><a href="#">CSS3</a></li>
	</ul>
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script>
	(function ($) {
	$.fn.extend({
	//插件名称 - paddingList
	paddingList: function (options) {

	//参数和默认值
	var defaults = {
	animatePadding: 10,
	hoverColor: "Black"
	};

	var options = $.extend(defaults, options);

	return this.each(function () {
	var o = options;

	//将元素集合赋给变量本例中是 ul对象
	var obj = $(this);

	//得到ul中的a对象
	var items = $("a", obj);

	//添加hover()事件到a
	items.hover(function () {
	$(this).css("color", o.hoverColor);
	//queue false表示不添加到动画队列中
	$(this).animate({ paddingLeft: o.animatePadding }, { queue: false, duration: 300 });

	}, function () {
	$(this).css("color", "");
	$(this).animate({ paddingLeft: "0" }, { queue: true, duration: 300 });
	});

	});
	}
	});
	})(jQuery);


	$("#catagory").paddingList(
	{
	animatePadding: 30,
	hoverColor: "Red"
	}
	);

	</script>
	</body>
	</html>