Moloch,
для медитации - дальнейшее расширение плагина и его новые возможности )))
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
(function($) {
var defaults = {
'animate': true,
'css': true,
'duration': 3000, //продолжительность выполнения анимации в ms
'easing': 'swing', //изменение скорости анимации
'background_color': 'green'
};
$.fn.inOut = function(opt) {
opt = $.extend({}, defaults, opt);
return this.each(function(index, self) {
var elem = $(self);
opt.animate && elem.animate({
'height': 'toggle',
'opacity': 'toggle'
}, {
'duration': opt.duration,
'easing': opt.easing
})
opt.css && elem.css('background-color', opt.background_color);
})
};
$.inOut = function(el, opt) {
$(el).inOut(opt)
};
$.inOut.setDefaults = function(setNew) {
defaults = $.extend({}, defaults, setNew)
}
})(jQuery);
jQuery(function($) {
function RandColor() {
var r = Math.floor(Math.random() * (256));
var g = Math.floor(Math.random() * (256));
var b = Math.floor(Math.random() * (256));
var rgb = 'rgb(' + r + ',' + g + ',' + b + ')';
return rgb;
}
$('button').eq(0).on('click', function() {
$('.container').inOut({
'duration': 1500,
background_color: 'pink'
});
});
$('button').eq(1).on('click', function() {
$('.container').inOut({
'duration': 1500
});
});
$('button').eq(2).on('click', function() {
$.inOut('.container');
});
$('button').eq(3).on('click', function() {
var color = RandColor();
$.inOut.setDefaults({
background_color: color
});
$.inOut('button:gt()', {
background_color: color,
animate: false
})
$.inOut('.container');
});
});
</script>
<title></title>
</head>
<body>
<div class="container">
<h2>Какой-то текст</h2>
<p>
Неспроста свинцовый сосуд мгновенно открывает квазиупругую колбу. Карусель быстра и кратковременна. Часто бывает, что ядерная лапка груба и продуманна. Очевидно, феноменальная шестерня брезентового комплекта бережно увеличивает тайную лампу. Изящное значение резко и метастабильно. Платиновая инерция перегоревшего изолятора образовывает разделение. Свет преднамерен и замысловат. Шланг предумышленен. Деревянное открытие периодично. Базальтовый проектировщик груб. Замкнутый болт наполняет шип. Нагруженность эпизодична и кратковременна.
</p>
</div>
<p><button>Нажми меня всегда pink</button></p>
<p><button>Нажми меня defaults green $('.container').inOut()</button></p>
<p><button>Нажми меня defaults green $.inOut('.container')</button></p>
<p><button>Изменить цвет по умолчанию</button></p>
</body>
</html>
|