Плавно убрать блок при нажатии / Блоки / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Блоки

Для Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Уникальный ID: 184

Количество символов:

Посмотрели: 2415 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 2 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, blocks, блок, Блоки, Block, Bootstrap, бутстрап

Поделился: BootstrapТема

Добавлено: 2015-12-03 в 14:30

Метка: 1582173013

⇄ ⇅

<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2015/b-v3-3-6/bootstrap.min.css" />
<link rel="stylesheet" href="https://bootstraptema.ru/plugins/font-awesome/4-4-0/font-awesome.min.css" />
<script type="text/javascript" src="https://bootstraptema.ru/plugins/jquery/jquery-1.11.3.min.js"></script>

<style>
body{background:#9074E3}
</style>

<style>
.bblock .clears {
position: absolute;
top: 11px;
right: 26px;
cursor: pointer
}
.clears {
color:red;
}
</style>

<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-3">

<div class="col-lg-4 bblock">
<img src="http://drawings-girls.ucoz.net/2015/08/lico-devushki-na-fone-zakata.jpg" class="img-responsive" alt="1" />
<i class="clears fa fa-times-circle"></i>
<hr>
</div>

<div class="col-lg-4 bblock">
<img src="http://drawings-girls.ucoz.net/2015/08/smuglaya-devushka-v-zelonom-platie.jpg" class="img-responsive" alt="2" />
<i class="clears fa fa-times-circle"></i>
<hr>
</div>

<div class="clearfix"></div>

<div class="col-lg-4 bblock">
<img src="http://drawings-girls.ucoz.net/2015/08/devushka-s-volshebnimi-mechami.jpg" class="img-responsive" alt="3" />
<i class="clears fa fa-times-circle"></i>
</div>

<div class="col-lg-4 bblock">
<img src="http://drawings-girls.ucoz.net/2015/08/devushka-s-belimi-pticami.jpg" class="img-responsive" alt="4" />
<i class="clears fa fa-times-circle"></i>
</div>

</div>
</div>
</div>

<script>
$(document).ready(function(){
$(".bblock .clears").click(function(){
$(this).parents(".bblock").animate({ opacity: 'hide' }, "slow");
});
});
</script>