Плавное движение блока "А" вправо при нажатии на блок "Б". Реализация на чистом JS

@VadimuSSS · Регистрация: 23.06.2014

Здравствуйте. Собственно все что необходимо указано в заголовке. Есть блок, который абсолютно спозиционирован. Шириной он 600px и его свойство left равно -640px. тоесть он спрятан. По нажатии на кнопку, он плавно скользит вправо до отметки left:0. И хочу чтоб по нажатию на ту же кнопку, он уходил в свое исходное положение left: -640px;
Подскажите, как реализовать, пожалуйста. Особенно не знаю как плавно это сделать на чистом JS.

@BANO · 23.04.2015, 14:44

VadimuSSS, вы хотите сделать прям на чистом js, или jquery использовать можно?

а вообще покажите ваш код "показывания" этого блока
или у вас его нет?

@VadimuSSS · 23.04.2015, 14:47 **[ТС]**

BANO, есть только попытки. три строчки которые ни к чему не привели. получение елемента по id и функция которая потом меняет его значение с left:-640; на left:0; Но ничего не работает. Ну и на плавность я даже не рассчитывал в своих попытках.

@BANO · 23.04.2015, 14:52

VadimuSSS, ну ты сначала покажи))

Добавлено через 3 минуты
вот смотри что я надыбал в интернете на счёт анимации

Javascript

var start = null;
var element = document.getElementById("SomeElementYouWantToAnimate");
 
function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.left = Math.min(progress/10, 200) + "px";
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}
 
window.requestAnimationFrame(step);

@VadimuSSS · 23.04.2015, 14:54 **[ТС]**

BANO, не хотелось светить этим позором, но вы меня вынудили

пожалуйста:

Javascript

var menu = {}
    function init(){
        menu.itself = document.getElementById(list);
        menu.position = menu.itself.style.left;
    }
 
    function fadeOut(){
        menu.position = 0;
    }

потом я повесил функцию fadeOut на нужный блок путем onclick="fadeOut()"

@Lazy_Den · 23.04.2015, 14:58

VadimuSSS, можно конечно и на чистом JS сделать:

Кликните здесь для просмотра всего текста

Javascript

var minleft = -300,
    maxleft = 0,
    time = 1000,
    timer = null,
    toggled = false;
 
window.addEventListener('load', function () {
    var but = document.getElementById('but');
    var slider = document.getElementById('box');
    slider.style.left = minleft + 'px';
    but.addEventListener('click', function () {
        clearInterval(timer);
        var instanceleft = parseInt(slider.style.left, 10),
            init = (new Date()).getTime(),
            height = (toggled = !toggled) ? maxleft : minleft,
            disp = height - parseInt(slider.style.left, 10);
        timer = setInterval(function () {
            var instance = (new Date()).getTime() - init;
            if (instance <= time) {
                var pos = instanceleft + Math.floor(disp * instance / time);
                slider.style.left = pos + 'px';
            } else {
                slider.style.left = height + 'px';
                clearInterval(timer);
            }
        }, 1);
    }, false);
}, false);

Но я бы делал с помощью JS+CSS.

Кликните здесь для просмотра всего текста

Javascript

window.addEventListener('load', function () {
    var but = document.getElementById('but');
    var slider = document.getElementById('box');
    but.addEventListener('click', function () {
        slider.classList.toggle('slidein');
    }, false);
}, false);

CSS

#box {
    position: absolute;
    width: 300px;
    height: 300px;
    background: #999;
    left: -300px;
    -webkit-transition: left 1s linear;
    -moz-transition: left 1s linear;
    transition: left 1s linear; 
}
#box.slidein {
    left: 0;
}

@BANO · 23.04.2015, 15:03

но на самом деле конечно в jquery это уже давно реализовано

@VadimuSSS · 24.04.2015, 11:15 **[ТС]**

Lazy_Den, Я, видимо, не правильно выразился. Я и имел ввиду js+css. А говоря "чистый js, я подразумевал без jquery. Спасибо, я сейчас разберу ваш пример.

Добавлено через 20 часов 7 минут
Lazy_Den, Разобрал вроде все. Потом попробовал ради эксперимента добавить на один свой шаблон в качестве менюшки, но почему то не захотело работать.

Наверное надо подробнее разобраться. Спасибо большое за помощь в обучении.

@VadimuSSS 2 / 2 / 0 Регистрация: 23.06.2014 Сообщений: 167
		1
	Плавное движение блока "А" вправо при нажатии на блок "Б". Реализация на чистом JS 23.04.2015, 14:00. Показов 3082. Ответов 7 Метки нет (Все метки) Здравствуйте. Собственно все что необходимо указано в заголовке. Есть блок, который абсолютно спозиционирован. Шириной он 600px и его свойство left равно -640px. тоесть он спрятан. По нажатии на кнопку, он плавно скользит вправо до отметки left:0. И хочу чтоб по нажатию на ту же кнопку, он уходил в свое исходное положение left: -640px; Подскажите, как реализовать, пожалуйста. Особенно не знаю как плавно это сделать на чистом JS. __________________ Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	23.04.2015, 14:44	2
	VadimuSSS, вы хотите сделать прям на чистом js, или jquery использовать можно? а вообще покажите ваш код "показывания" этого блока или у вас его нет? 0

@VadimuSSS 2 / 2 / 0 Регистрация: 23.06.2014 Сообщений: 167
	23.04.2015, 14:47 [ТС]	3
	BANO, есть только попытки. три строчки которые ни к чему не привели. получение елемента по id и функция которая потом меняет его значение с left:-640; на left:0; Но ничего не работает. Ну и на плавность я даже не рассчитывал в своих попытках. 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	23.04.2015, 15:03	7
	но на самом деле конечно в jquery это уже давно реализовано 0

@VadimuSSS 2 / 2 / 0 Регистрация: 23.06.2014 Сообщений: 167
	24.04.2015, 11:15 [ТС]	8
	Lazy_Den, Я, видимо, не правильно выразился. Я и имел ввиду js+css. А говоря "чистый js, я подразумевал без jquery. Спасибо, я сейчас разберу ваш пример. Добавлено через 20 часов 7 минут Lazy_Den, Разобрал вроде все. Потом попробовал ради эксперимента добавить на один свой шаблон в качестве менюшки, но почему то не захотело работать. Наверное надо подробнее разобраться. Спасибо большое за помощь в обучении. 0

Опции темы

Плавное движение блока "А" вправо при нажатии на блок "Б". Реализация на чистом JS

Решение