как неоднократно обращаться css3, преобразовывают к элементу отделения

У меня есть отделение, которое я применяю, css3 преобразовывают, чтобы переместить его направо (добавляющий класс движения к нему) и оставленный (удаление класса движения от). После добавления класса движения, чтобы сделать мое отделение (id=container), чтобы переместиться направо, я хочу быть в состоянии сделать отделение более снова направо после добавления класса движения во второй раз. Двиньтесь класс добавлен или удален с jQuery, когда по кнопкам "Move right" и "Move left" соответственно щелкают.

вот мой код:

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $('#bMoveRight').on('click', function(e){
            $('#container').addClass('move');
        });

        $('#bMoveLeft').on('click', function(e){
            $('#container').removeClass('move');
        });
    });     
    </script>
    
        </head> (should match the opening <head> tag, omitted due to restraints on the posting)
            <body>
<div id="container">This is a good testing container that I hope will behave itself</div>

<button id="bMoveLeft">Move left</button> <button id="bMoveRight">Move right</button>

</body>
0
nl ja de

2 ответы

Нет никакого способа применить тот же самый класс дважды к одному элементу. Что можно сделать, вместо этого проверка, чтобы видеть, какой класс в настоящее время применяется к элементу, и затем примените правильный класс преобразования (move2, move3, и т.д.), который каждый имеет больше, и больше переводят свойства:

.move2 {
    transform: translateX(200px);
    -webkit-transform: translateX(200px);
}
0
добавлено
Хорошо, I' попытка ll это
добавлено автор Christian Mampuya, источник

на основе вашего ответа я стал что я разыскиваемым щипанием маленькой вашей идеи. Я пропустил CSS класс, и примените преобразование, на лету используя jQuery. Мой код теперь похож на это:

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        var count = 0;
        $('#bMoveRight').on('click', function(e){
            ++count;
            $('#container').css('-webkit-transform', 'translateX(' + count + '00px)');
        });

        $('#bMoveLeft').on('click', function(e){
            --count;
            $('#container').css('-webkit-transform', 'translateX(' + count + '00px)');
        });
    });     
    </script>
    

            <body>
        <div id="container">This is a good testing container that I hope will behave itself</div>
        

<button id="bMoveLeft">Move left</button> <button id="bMoveRight">Move right</button>

</body>
0
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)