Какая-то непонятка со скриптом
Здравствуйте.
Есть срипт с анимацией, но почему-то при добавлении внутри блока еще одной ссылки вся анимация нарушается, а ссылка, оборачивающая весь 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; }); }); |
Для начала - я чего то не понимаю или ты в span - строчный(а точнее в букет span'ов) оборачиваешь ul - блочный элемент??
И все это обернуто в ссылку, у которой наверняка не указано display:block? мне кажется или скрипт не имеет отношения к представленной верстке? |
Часовой пояс GMT +3, время: 13:13. |