Показать сообщение отдельно
  #1 (permalink)  
Старый 24.04.2015, 18:15
Новичок на форуме
Отправить личное сообщение для supvlmail Посмотреть профиль Найти все сообщения от supvlmail
 
Регистрация: 12.03.2015
Сообщений: 3

Кнопка с изменением фона
Здравствуйте! Я пытался сделать что-то вроде кнопки, при наведении на которую постепенно(как будто загружается) меняется фон.
var crElement = document.createElement("button");
				crElement.innerHTML = "Действовать";
				crElement.setAttribute("style", "margin-top:10px; padding:7px 10px; font-size:22px; 		background-color:rgb(14,131,205); color:white; border:3px solid white;");
				crElement.setAttribute("onmouseover", "fora()");
			var callToAction = document.getElementById("callToAction");
				callToAction.appendChild(crElement);
			var posY = crElement.offsetTop;
			var posX = crElement.offsetLeft;
			var wY = crElement.clientHeight;
			var wX = crElement.clientWidth;
			
			var crElement2 = document.createElement("button");
				crElement2.innerHTML = "Действовать";
				crElement2.setAttribute("style", "position:absolute; padding:7px 10px; font-size:22px; background-color:rgb(255,255,255); color:rgb(14,131,238); border:3px solid rgb(14,131,205); width:0px;");
				crElement2.style.top = posY + "px";
				crElement2.style.left = posX + "px";
			var callToAction = document.getElementById("callToAction");
				callToAction.appendChild(crElement2);
			
			function fora() {
				for(var i = 0; i < (crElement.clientWidth + 6); ++i) {
					funcFor(i);
				}
			}
			function funcFor(i) {
					setTimeout(widthPlus, 1000, i);
			}
			function widthPlus(i) {
				crElement2.style.width = i + "px";
			}

Но получается, что он меняет фон без визуальной загрузки.
Подскажите пожалуйста, что не так?
Может быть кто-то предложит альтернативный способ? Только без использования чужих скриптов.
Ответить с цитированием