Как заставить HTML-div быстро перемещаться вправо (менее 1 секунды) и исчезать?
Я хотел бы, чтобы html div быстро перемещался вправо (например, менее чем на 1 секунду) и исчезал. Затем снова появитесь прямо в том месте, где div был в самом начале этого процесса через 1 секунду. Этот процесс запускается нажатием кнопки и повторяется 10 раз.
Я попытался использовать свойство перехода в CSS для достижения этой цели, но результат - это не то, что я хотел. При перемещении вправо div исчезнет напрямую, а не исчезнет.
Может быть, то, что я хочу сделать, невозможно достичь с помощью CSS? В таком случае что мне использовать?
Код css:
#box1 {
width: 100px;
height: 100px;
background: red;
-webkit-transition-property: left, right; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-property: left, right;
transition-duration: 2s;
position:absolute;
left: 0;
}
#box1:hover {
transition-delay:1s;
left: 100px;
transition-delay:1s;
opacity:0;
}
Код Javascript:
var elem = document.getElementById("box1");
$('#b').click(function(){
var i = 0;
while (i < 10){
setTimeout(function(){
elem.setAttribute("style","left: 1000px;");
}, 500);
setTimeout(function(){
elem.setAttribute("style"," opacity: 0;");
}, 500);
i ++;
}
})
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете добиться этого разными способами:
1-использование перехода и метода jQuery css:
//changing the style of the box using css method of jQuery
var animationDuration = 800;
var animationRepetition = 10;
//this array will be used to clear timeouts if user click while animation still going
var timeoutIds = [];
$("#css_method").click(function() {
for (var i = 0; i < timeoutIds.length; i++) {
clearTimeout(timeoutIds[i]);
}
timeoutIds = [];
for (var i = 0; i < animationRepetition; i++) {
var index = i;
var id1 = setTimeout(function() {
$("#box1").addClass("left-opacity-transition").css({
left: 500,
opacity: 0
});
}, 2 * index * animationDuration)
var id2 = setTimeout(function() {
$("#box1").removeClass("left-opacity-transition").css({
left: 0,
opacity: 1
});
}, ((2 * index) + 1) * animationDuration);
timeoutIds.push(id1, id2);
}
});#box1 {
width: 100px;
height: 100px;
background-color: red;
position: relative;
left: 0;
}
button {
margin-top: 30px;
}
.left-opacity-transition {
-webkit-transition-property: left, opacity;
/* Safari */
-webkit-transition-duration: .8s;
/* Safari */
transition-property: left, opacity;
transition-duration: .8s;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id = "box1"></div>
<button id = "css_method" type='button'>use css method</button>2-использование анимированного метода jQuery:
//using the animate method of jQuery you can remove the transition from style
var animationDuration = 800;
var animationRepetition = 10;
$("#animate_method").click(function() {
var $box1 = $("#box1");
$box1.finish();
for (var i = 0; i < animationRepetition; i++) {
$box1.animate({
left: 500,
opacity: 0
}, 800, function() {
$box1.css({
left: 0,
opacity: 1
});
});
}
});#box1 {
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
button {
margin-top: 30px;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id = "box1" class = "fade-in-left"></div>
<button id = "animate_method" type='button'>use animate method</button>3-использование перевода в классе css:
//using the translateX you also can change the element position in X axis
var animationDuration = 800;
var animationRepetition = 10;
//this array will be used to clear timeouts if user click while animation still going
var timeoutIds = [];
$("#translate_button").click(function() {
for (var i = 0; i < timeoutIds.length; i++) {
clearTimeout(timeoutIds[i]);
}
timeoutIds = [];
for (var i = 0; i < animationRepetition; i++) {
var index = i;
var id1 = setTimeout(function() {
$("#box1").addClass("transform-opacity-transition translate-fade-left");
}, 2 * index * animationDuration);
var id2 = setTimeout(function() {
$("#box1").removeClass("transform-opacity-transition translate-fade-left");
}, ((2 * index) + 1) * animationDuration);
timeoutIds.push(id1, id2);
}
});#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
button {
position: absolute;
top: 150px;
}
.translate-fade-left {
transform: translateX(500px);
-webkit-transform: translateX(500px);
opacity: 0;
}
.transform-opacity-transition {
-webkit-transition-property: transform, opacity;
/* Safari */
-webkit-transition-duration: .8s;
/* Safari */
transition-property: transform, opacity;
transition-duration: .8s;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id = "box1"></div>
<button id = "translate_button" type='button'>use translate</button>Спасибо за ваш ответ. Но под «повторным появлением» я подразумеваю повторное появление непосредственно в той позиции, в которой исходный элемент div был до начала всего процесса, вместо того, чтобы элемент возвращался в исходную позицию. (Извините, что я не ясно выразился в своем вопросе.) Вы не будете возражать, если вы соответственно обновите свои ответы?
да, конечно, вам просто нужно будет удалить переходы, когда вы вернете элемент в исходное положение, я отредактировал это, и если это все еще не желаемое поведение, просто дайте мне знать, и я постараюсь это исправить. Я рекомендую вам использовать второй подход (2 с использованием метода jQuery для анимации), потому что он совместим с браузером (не требует перехода или преобразования css), а метод анимации более точен по времени, чем setTimeout.
Спасибо. Просто предложение: если вам это удобно, вы также можете поместить код из предыдущей версии вашего ответа в jsfiddle и поместить ссылку в свой ответ для справки.
@Aqqqq Спасибо за предложение, я обязательно буду работать с вашим советом, ура.
В CSS это невозможно. Вам придется использовать
keyframes, но это также можно сделать в JS, если вы хотите пойти по этому пути. В любом случае, не могли бы вы опубликовать свой код.