Блог

Главная - Вопросы по программированию - jQuery анимирует плавающий div

jQuery анимирует плавающий div

#jquery #jquery-animate #css-float

#jquery #jquery-анимировать #css-float

Вопрос:

Я пытаюсь создать анимацию постепенного перехода для div. Идея состоит в том, чтобы перемещать div справа налево и постепенно исчезать. Из-за макета div перемещается прямо над определенной шириной окна (т. Е. 501px) и слева ниже (500px).

HTML

 <div id="container">
    <div id="animated"></div>
</div>

CSS

 @media only screen and (min-width:501px)
{
    #animated {
        float:right;
    }
}

@media only screen and (max-width:500px) 
{
    #animated {
        float:left;
    }
}

Когда div перемещается вправо, все работает нормально, но когда для свойства floating установлено значение left, перемещение перестает работать. Как я могу изменить свой скрипт, чтобы добиться движения с помощью уникального кода, независимо от плавающих свойств и критических точек CSS? Заранее спасибо.

Скрипка

Ответ №1:

Вы можете использовать jQuery, чтобы получить ширину окна браузера, а затем выполнить условную проверку для вашей анимации.

Javascript:

 // Returns float of animated window based on CSS values
var float = $('#animated').css('float');

if (float == 'right') {
    $('#animated').css("margin-right", '10%').animate({
        "margin-right": "-=10%",
        opacity: 1
    }, 2000, 'swing');
} else {
    $('#animated').css("margin-left", '10%').animate({
        "margin-left": "-=10%",
        opacity: 1
    }, 2000, 'swing');
}

ДЕМОНСТРАЦИЯ http://jsfiddle.net/3L93z/3 /

Комментарии:

1. Я понимаю вашу точку зрения, но моя цель — создать уникальный код для обеих анимаций, который не зависит от ширины окна. Определение ширины окна в скрипте привязывает скрипт к CSS. Если я изменю точку останова CSS, я также должен изменить сценарий. Вот почему я хотел бы создать уникальный код, который не зависит от свойств CSS (т. Е. Ширины окна или плавающего свойства).

2. ок отредактировал его, чтобы использовать float свойство css, чтобы сохранить ограничение только в CSS.