Возможности библиотеки Jquery колоссальны. По дереву DOM переход она обеспечивает, обработку событий осуществляет, дополнения AJAX реализует. Но любят ее не за это. Баснословную популярность среди разработчиков Jquery обеспечивают многочисленные, разнообразные и очень симпатичные анимационные эффекты. Де - факто Jquery считается инструментом № 1 для реализации анимационных элементов сайта. Но если в проекте требуется только анимация, то нельзя ли реализовать ее без Jquery, средствами «Битрикс»? Можно, и вот как это делается.
1. Ссылка, вызывающая блок с анимацией
<div class="col-md-3 col-reg-extra">
<a href="" id="register_link" >Зарегистрироваться
<img src="/images/register_icon.png">
</a>
</div>
2. Код блока с анимацией
<div class="row" id="block_set_password">
<div class="col-md-6">
<input type="text" name="DATE_FROM" class="form-control" placeholder="дата начала" />
</div>
<div class="col-md-6">
<input type="text" name="DATE_TO" class="form-control" placeholder="дата конца" />
</div>
</div>
3. Метод «Битрикс», реализующий анимацию
<script type="text/javascript">
BX.ready(function(){
// приучаемся использовать namespace для своих фишек - это полезно
scope_auth = {}
scope_auth.showHideRegFields = function(animate_elem){
if(!this.toggle_animate)
this.toggle_animate = 0;
if(this.toggle_animate) { //need hide
this.height_begin = 100;
this.opacity_begin = 100;
this.height_end = 0;
this.opacity_end = 0;
this.toggle_animate = 0;
} else { //need show
animate_elem.style.display = 'block';
this.height_begin = 0;
this.opacity_begin = 0;
this.height_end = 100;
this.opacity_end = 100;
this.toggle_animate = 1;
}
// анимация заключается в изменение прозрачности элемента (opacity)
var anim = new BX.easing({
duration : 800,
start : { height : this.height_begin, opacity : this.opacity_begin },
finish : { height : this.height_end, opacity: this.opacity_end },
transition : BX.easing.transitions.quart,
step : function(state){
animate_elem.style.opacity = state.opacity/100;
},
complete : function() {
if(this.toggle_animate) animate_elem.style.display = 'none';
}
});
anim.animate();
return false;
}
var block_set_password = BX('block_set_password');
});
</script>
4. Подключение обработчика
<div class="col-md-3 col-reg-extra">
<a href="" id="register_link" onclick="scope_auth.showHideRegFields(block_set_password);" >Задать дату активности
<img src="/images/date_icon.png">
</a>
</div>
Готово!
Назад в раздел