Показать сообщение отдельно
  #1 (permalink)  
Старый 27.09.2014, 15:31
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

Какая-то непонятка со скриптом
Здравствуйте.
Есть срипт с анимацией, но почему-то при добавлении внутри блока еще одной ссылки вся анимация нарушается, а ссылка, оборачивающая весь 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;
        });
    });
Ответить с цитированием