Здравствуйте! Я пытался сделать что-то вроде кнопки, при наведении на которую постепенно(как будто загружается) меняется фон.
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";
}
Но получается, что он меняет фон без визуальной загрузки.
Подскажите пожалуйста, что не так?
Может быть кто-то предложит альтернативный способ? Только без использования чужих скриптов.
