redamoon/JdGvGO.markdown

## index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.2.js"></script>
</head>
<body>
<div class="mod-btn is-btn--type01 js-target-btn h-mb10"><span>ボタン</span></div>
<div class="mod-btn is-btn--type02 js-target-btn"><span>ボタン</span></div>
</body>
</html>

## JdGvGO.markdown

      
    Raw
  

              JdGvGO.markdown
            
          
    JdGvGO
('-' * 6)
A Pen by redamoon on CodePen.
License.

  
## script.js
/*var Sample = {
  name: 'sampleくん',
  age: '30',
  init: function() {
    // 何かしらの処理
  },
  sayHello: function() {
    document.write('Hello,' + this.name +'です');
    console.log('Hello,' + this.name +'です');
  }
}
Sample.name = "yonpuruくん";
Sample.sayHello(); // Hello, yonpuruくんです*/
var Btn = (function(){
  var _targetBtn = $('.js-target-btn');
  function HoverBtnType01(){
    _targetBtn.hover(
      function(){
        $(this).find('span').stop().animate({'marginLeft':'25px'},100);
      },
      function () {
        $(this).find('span').stop().animate({'marginLeft':'0px'},300);
      }
    );
  }
  function HoverBtnType02(){
    var color_type01 = '#FF0000',
        color_type02 = '#0000FF';
    _targetBtn.hover(
      function(){
        $(this).stop().animate({'backgroundColor': '#FF00FF'},200);
      },
      function () {
        if($(this).hasClass('is-btn--type01')){
          $(this).stop().animate({'backgroundColor': color_type01},300);
        } else if($(this).hasClass('is-btn--type02')){
          $(this).stop().animate({'backgroundColor': color_type02},300);
        }
      }
    );
  }
  return {
    HoverBtnType01: HoverBtnType01, //公開する機能のみ返す
    HoverBtnType02: HoverBtnType02 //公開する機能のみ返す
  }
})();
/*Btn.HoverBtnType01();*/
Btn.HoverBtnType02();

var Sample = (function(){
  var _nickName = 'sampleくん';
  var _age = '30';
  function _init(){
    // 初期値
  }
  function _sayHello(){
    document.write('Hello,' + _nickName +'です');
    /*console.log('Hello,' + _nickName +'です');*/
  }
  _init();
  return {
    sayHello: _sayHello //公開する機能のみ返す
  }
})();
Sample._nickName = 'hogehogeくん' // 変更できない
Sample.sayHello(); // Hello, sampleくんです。

## style.css
body{
  background: #CCC;
}
.mod-btn{
  border-radius:10px;
  padding: 10px;
  cursor: pointer;
}
.is-btn--type01{
  background: #FF0000;
}
.is-btn--type02{
  background: #0000FF;
  color: #FFF;
}
.h-mb10{
  margin-bottom:10px;
}
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8" />
	<title>demo</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="http://code.jquery.com/color/jquery.color-2.1.2.js"></script>
	</head>
	<body>
	<div class="mod-btn is-btn--type01 js-target-btn h-mb10"><span>ボタン</span></div>
	<div class="mod-btn is-btn--type02 js-target-btn"><span>ボタン</span></div>
	</body>
	</html>
	/*var Sample = {
	name: 'sampleくん',
	age: '30',
	init: function() {
	// 何かしらの処理
	},
	sayHello: function() {
	document.write('Hello,' + this.name +'です');
	console.log('Hello,' + this.name +'です');
	}
	}
	Sample.name = "yonpuruくん";
	Sample.sayHello(); // Hello, yonpuruくんです*/
	var Btn = (function(){
	var _targetBtn = $('.js-target-btn');
	function HoverBtnType01(){
	_targetBtn.hover(
	function(){
	$(this).find('span').stop().animate({'marginLeft':'25px'},100);
	},
	function () {
	$(this).find('span').stop().animate({'marginLeft':'0px'},300);
	}
	);
	}
	function HoverBtnType02(){
	var color_type01 = '#FF0000',
	color_type02 = '#0000FF';
	_targetBtn.hover(
	function(){
	$(this).stop().animate({'backgroundColor': '#FF00FF'},200);
	},
	function () {
	if($(this).hasClass('is-btn--type01')){
	$(this).stop().animate({'backgroundColor': color_type01},300);
	} else if($(this).hasClass('is-btn--type02')){
	$(this).stop().animate({'backgroundColor': color_type02},300);
	}
	}
	);
	}
	return {
	HoverBtnType01: HoverBtnType01, //公開する機能のみ返す
	HoverBtnType02: HoverBtnType02 //公開する機能のみ返す
	}
	})();
	/Btn.HoverBtnType01();/
	Btn.HoverBtnType02();

	var Sample = (function(){
	var _nickName = 'sampleくん';
	var _age = '30';
	function _init(){
	// 初期値
	}
	function _sayHello(){
	document.write('Hello,' + _nickName +'です');
	/console.log('Hello,' + _nickName +'です');/
	}
	_init();
	return {
	sayHello: _sayHello //公開する機能のみ返す
	}
	})();
	Sample._nickName = 'hogehogeくん' // 変更できない
	Sample.sayHello(); // Hello, sampleくんです。
	body{
	background: #CCC;
	}
	.mod-btn{
	border-radius:10px;
	padding: 10px;
	cursor: pointer;
	}
	.is-btn--type01{
	background: #FF0000;
	}
	.is-btn--type02{
	background: #0000FF;
	color: #FFF;
	}
	.h-mb10{
	margin-bottom:10px;
	}