Здравствуйте.
Есть срипт с анимацией, но почему-то при добавлении внутри блока еще одной ссылки вся анимация нарушается, а ссылка, оборачивающая весь div закрывается перед этим дивом, т.е. получается что див уже не обернут в ссылку.
<a href="/" class="slide1 m-slide bigHover item-slide item-pos-br">
<div class="tile-item-bg" style="background-image: url('/assets/template/img/brus.jpg');">
<span class="hover">
<span class="font"></span>
<span class="textBlock">
<span class="hoverTop">
<span class="title">Дома из клееного бруса</span>
</span>
<span class="hoverMiddle">
<ul>
<li>Под ключ</li>
<li>Проектирование</li>
<li>Строительство</li>
</ul>
</span>
</span>
</span>
</div>
</a>
Скрипт:
var $index_project_tile = $('#index_project_tile');
$index_project_tile.goldenLandMover();
$(function() {
var current_filter_id;
var categories_tpl = '' +
'<span class="icon-container">' +
' <span class="icon" style="background-image: url(%(icon)s);"></span>' +
' <span class="text"><span class="cover">%(title)s</span></span>' +
'</span>';
var getCategoryIcon = function(icon, title, open) {
var title_arr = title.split(' ');
var title_arr_length = title_arr.length;
var title_part_1 = title_arr.slice(0, Math.ceil(title_arr_length/2)).join(' ');
var title_part_2 = title_arr.slice(Math.ceil(title_arr_length/2, title_arr_length)).join(' ');
var part_title = title_part_1;
if (title_part_2) {
part_title += '<br> ' + title_part_2;
}
var html = categories_tpl
.replace('%(icon)s', icon)
.replace('%(title)s', part_title)
.replace('%(open)s', open?' open':'');
return html;
}
var getTileTypeByPos = function(pos) {
if (pos == 'br' || pos == 'tl') {
return 'big'
}
if (pos == 'trr') {
return 'mid'
}
return 'small'
}
var changeCurentTile = function(pos, data) {
var type = getTileTypeByPos(pos);
var $tile = $('.tiled-filter-galery .item-pos-' + pos);
if (data) {
$tile.attr('href', '/project/' + data.id + '/');
} else {
$tile.attr('href', '#');
}
var $prev_item = $tile.find('.tile-item-bg').clone();
if (data) {
$prev_item.find('.title').html(data.title);
$prev_item.find('.street').html(data.geo_title);
$prev_item.css({
backgroundImage: 'url("' + data.img + '")'
});
if (type == 'big' || type == 'mid') {
$prev_item.find('.hoverMiddle').html(data.description);
}
if (type == 'big') {
if (data.categories.length > 0) {
$prev_item.find('.hoverBottom .proect').html('');
var cat;
for (var i = 0; i < data.categories.length; i++) {
cat = data.categories[i];
var icon = getCategoryIcon(cat.icon, cat.title, i == 0);
$prev_item.find('.hoverBottom .proect').append(icon);
}
$prev_item.find('.hoverBottom').show();
} else {
$prev_item.find('.hoverBottom').hide();
}
}
} else {
$prev_item.find('.title').html('');
$prev_item.find('.street').html('');
$prev_item.css({
backgroundImage: 'none'
});
$prev_item.find('.hoverMiddle').html('');
$prev_item.find('.hoverBottom .proect').html('');
$prev_item.find('.hoverBottom').hide();
}
$tile.flippy({
color_target: '#ffffff',
duration: 500,
light: 40,
onFinish: function() {
setTimeout(function() {
$tile.flippy({
duration: 500,
verso: $prev_item,
light: 60,
onFinish: function() {
// fix rendering bug
$index_project_tile.css({opacity: 0.99});
setTimeout(function() {$index_project_tile.css({opacity: 1});}, 10);
},
onAnimation: function() {
// fix rendering bug
$index_project_tile.css({opacity: 0.99});
setTimeout(function() {$index_project_tile.css({opacity: 1});}, 10);
}
});
setTimeout(function() {$tile.css({opacity: 1});}, 10);
}, 120);
// fix rendering bug
$index_project_tile.css({opacity: 0.99});
setTimeout(function() {$index_project_tile.css({opacity: 1});}, 10);
},
onAnimation: function() {
// fix rendering bug
$index_project_tile.css({opacity: 0.99});
setTimeout(function() {$index_project_tile.css({opacity: 1});}, 10);
}
});
}
var rebuildProjectsTile = function(data) {
for (var i = 0; i < data.length; i++) {
var delay = function(n) {
setTimeout(function() {
var d = null;
if (data[n].pk) {
d = data[n];
}
changeCurentTile(data[n].pos, d);
}, n * 200);
}
delay(i);
}
}
var loadProjectsData = function(id) {
if (id != current_filter_id) {
var url = '/ajax/project/filter/';
if (id) {
url += '?category=' + id;
}
$.get(url, {}, function(response) {
if (response.status == 'success') {
rebuildProjectsTile(response.data);
}
});
}
current_filter_id = id;
}
var $filter_handlers = $('.project-category-filter');
$filter_handlers.click(function() {
$filter_handlers.removeClass('active');
var $item = $(this);
$item.addClass('active');
var category_id = $item.data('projectCategoryId');
loadProjectsData(category_id);
return false;
});
});
