Ширина деления увеличивается / уменьшается при клике

Question

Для сайта, который я создаю для себя и друга, у меня есть контейнер / обёртка для div с двумя другими элементами div: один занимает левую половину и имеет черный фон, а другой - правый с белым фоном,По сути, это позволяет мне получить разделенный цветной фон.Каждый div содержит половину логотипа.Вот страница, временно размещенная, чтобы вы могли ее видеть.

http://djsbydesign.com/tempsite/index.htm

В любом случае, я хотел бы иметь ссылки на левой и правой сторонах страницы, которые, по щелчку, приводят к увеличению их соответствующих div с 50%до 100%.У меня есть несколько идей, но я не совсем уверен, как это сделать (я довольно новичок в JavaScript).Первым было бы установить z-индекс расширяющегося div на нечто большее, чем нерасширяемый, а затем развернуть его (как-то), а другим - расширить div на 100%, а другой сжать до0% с одинаковой ставкой.

Суть в том, что я понятия не имею, как это сделать.Я не против использовать mootools или jQuery для записи.

Answer 1

Кажется, работает следующее:

$('#left-bg, #right-bg').click(
    function(){
        $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
    });

Хотя я не уверен, как вы планируете вернуть «другое» div.

Демоверсия JS Fiddle .

Отредактировано , чтобы добавить кнопку (через jQuery), которая позволяет обоим div s вернуться к исходным размерам:

$('#left-bg, #right-bg').click(
    function(){
        $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
        $('<button class="show">Show all</button>')
            .appendTo('#wrapper');
    });

$('.show').live('click',
                function(){
                    $('#left-bg').animate(
                        {
                            'width': '50%'
                        },600);
                    $('#right-bg').animate(
                        {
                            'width': '50%'
                        },600);
                    $(this).remove();
                });

Обновлена ​​JS Fiddle .

Отредактировано для решения вопроса, оставленного OP в комментариях:

Есть ли способ перенаправить страницу после завершения анимации?

Да, просто добавьте строку window.location.href = "http://path.to.url.com/";

$('#left-bg, #right-bg').click(
    function(){
        $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
        $('<button class="show">Show all</button>')
            .appendTo('#wrapper');
        window.location.href = "http://www.google.com/" // <-- this line redirects.
    });

$('.show').live('click',
                function(){
                    $('#left-bg').animate(
                        {
                            'width': '50%'
                        },600);
                    $('#right-bg').animate(
                        {
                            'width': '50%'
                        },600);
                    $(this).remove();
                });

Обновлен JS Fiddle .

Отредактировано в ответ на сообщение об ошибке (в комментариях):

Еще одна ошибка (простое исправление) заключается в том, что каждый раз, когда вы нажимаете на любой из элементов div, он создает новыйкнопка.Скажем, вы нажали на левую половину, и она расширилась и заполнила страницу, и т. Д., А затем вы снова нажали на нее (теперь она где-то на странице).Он попытается добавить вторую кнопку.

Чтобы предотвратить добавление второй кнопки к div, просто добавьте if:

$('#left-bg, #right-bg').click(
    function(){
        if (!$('.show').length) {
            $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
            $('<button class="show">Show all</button>')
                .appendTo('#wrapper');
            window.location.href = "http://www.google.com/" // <-- this line redirects.
        }
    });

, которая будет толькодобавьте button или действительно анимируйте div s, пока селектор $('.show') возвращает нет совпадений.

Однако, если вы также перенаправляете на другую страницу с помощьющелкнув по кнопке, это не должно быть проблемой в любом случае, поскольку ни один из jQuery на исходной странице не будет отображать / иметь возможность доступа к странице, на которую перенаправлен пользователь (если это не страница в вашем собственном домене, и вы неявно выбран для добавления того же button).

Answer 2

Похоже, у вас есть jQuery, так что используйте его!Это самая простая библиотека для создания простых анимаций с помощью.

Вот пример функции щелчка, которая передвинет правый фон на 100%, как вы сказали:

$('a#link').click(function(e) {
  e.preventDefault();
  $('#left-bg').animate({ width : '0%' }, 'slow');
  $('#right-bg').animate({ width : '100%' }, 'slow');
});

Очевидно, чтобы перейти вВ другом направлении вы переключали бы значения ширины в объекте, передаваемом в функции animate.

Если вы не знакомы с функцией animate, проверьте документы, но в основном вы просто передаете правила CSS в ключе:значение объекта, и он со временем изменит значения CSS - оживляя его!

Надеюсь, это поможет!

Answer 3

Если вы дадите абсолютные позиции вашему диву так, чтобы - 1-й был в верхнем левом углу, а другой - в верхнем правом углу И затем в событии щелчка вы можете изменить положение другого верхнего угла div, который будет расширен.

Вы можете использовать jquery, чтобы сделать это легко. Проверьте JQuery документации для настройки CSS.