Проблемы с хранением элемента div в правой части окна браузера, когда размеры браузера изменяются после эффекта анимации

Question

Проблемы с хранением элемента div в правой части окна браузера, когда размеры браузера изменяются после эффекта анимации

0

У меня есть родительский div, который содержит два других бок о бок div. При щелчке эти divs перемещаются с одной стороны на другую сторону окна браузера (нажмите на левый div, он перемещается влево, щелкает правой div, и он перемещается в крайнее право браузера) - я должен сказать, что здесь все работает так, как я желаю.

Проблема возникает, когда я пытаюсь вручную изменить размер моего браузера, хватая нижнюю правую и масштабируя его до нового измерения. Когда я это делаю, div остается в том же месте (что было далеко от исходного размера браузера), и поэтому "падает" из поля зрения, для меня очень важно, чтобы этот div держался в крайнем правом углу браузера окно меняет размер.

Я знаю, что если сказать, что свойство div css установлено вправо: 0 оно должно оставаться в крайнем правом углу, но по какой-то причине эффект анимации javascript, похоже, не учитывает или не отменяет это, и сохраняет его в исходном браузере далеко правее вместо следующего новое измерение.

Вот мой текущий код в базовой форме, чтобы показать вам, как я его до сих пор:

HTML:

<span id='one'>&nbsp;    
    <span id='two'>&nbsp;</span>
    <span id='three'>&nbsp;</span>
</span>

CSS:

#one {
    height:100px;
    width:210px;
    background-color:red;
    position:absolute;
    left:0;
}
#two {
    height:100px;
    width:100px;
    background-color:blue;
    float:left;
}
#three {
    height:100px;
    width:100px;
    background-color:green;
    float:right;
}

JavaScript:

$(document).ready(function(){
    $('#two').click(function(){
        window_width = $(document).width();
        element_width = $('#one').width();
        edge = window_width - element_width;
        $('#one').animate({right:edge, left:0}, 100).delay(0);
        console.log($('#one').css('left'));   
    });
});
$(document).ready(function(){
    $('#three').click(function(){
        window_width = $(document).width();
        element_width = $('#one').width();
        edge = window_width - element_width;
        $('#one').animate({left:edge, right:0}, 100).delay(0);
        console.log($('#one').css('left'));
    });
    console.log($('#one').css('left'));
});

Любая помощь будет принята с благодарностью - я пробовал SO в течение нескольких дней и изо всех сил пытался найти какой-либо разрешающий ответ. Спасибо всем заблаговременно.

user3045883 18 дек. 2013, в 00:16

Источник

Теги:

javascript

html

css

animation

4 ответа

Ещё вопросы

kei · Answer 1 · 2013-12-17T21-23-00.000Z

DEMO

var _pos;

$('#two').click(function () {
    window_width = $(window).width();
    element_width = $('#one').width();
    edge = window_width - element_width;
    $('#one').animate({
        right: edge,
        left: 0
    }, 100).delay(0);
    console.log($('#one').css('left'));
    _pos="left";
});

$('#three').click(function () {
    window_width = $(window).width();
    element_width = $('#one').width();
    edge = window_width - element_width;
    $('#one').animate({
        left: (edge > window_width)?window_width:edge,
        right: 0
    }, 100).delay(0);
    console.log($('#one').css('left'));
    _pos="right"
});

$(window).resize(function(){
   if (_pos=="left") $("#two").click();
   if (_pos=="right") $('#three').click();
});

Важная часть здесь заключается в изменении $(document).width() на $(window).width() поскольку вы хотите, чтобы div настраивался, когда экран становится меньше, а не только когда он становится больше.

Это работает именно так, как мне нужно, спасибо. Есть ли способ заставить #one удерживать правую часть браузера с немного большей плавностью, поскольку при повторном масштабировании браузера он делает то, что я просил в предыдущем вопросе, но очень нервно / с задержкой и не так гладко, как я? В идеале хочу ... как вы можете проверить в своей демонстрации при изменении размера вашего браузера. Спасибо большое за вашу помощь.

user2957836 · Answer 2 · 2013-12-17T21-21-00.000Z

Попробуйте установить свои размеры в% в файле css, поэтому они изменяются, когда вы открываете html с монитора с более низким разрешением. Вы также можете проверить медиа-запросы. Они очень хороши для создания веб-страниц, которые выглядят одинаково при любых разрешениях.

arandompenguin · Answer 3 · 2013-12-17T20-49-00.000Z

Не могли бы вы установить переменную для хранения позиции divs, а затем использовать обработчик события .resize() из JQuery? Например,

var isLeft = true;

$(window).resize(function() {
    if (!isLeft) {
        window_width = $(document).width();
        element_width = $('#one').width();
        edge = window_width - element_width;
        $('#one').animate({right:edge, left:0}, 100).delay(0);
        console.log($('#one').css('left'));
    }
});

И то же самое для другого div. Вы устанавливаете переменную isLeft или isRight внутри событий кликов.

candu · Answer 4 · 2013-12-17T19-54-00.000Z

Вы можете прикрепить слушателя к window.onresize:

https://developer.mozilla.org/en-US/docs/Web/API/Window.onresize