winch,
вы сперва ответьте себе на вопрос чего вам надо. Ведь css анимация доступа только в CSS3, в версиях браузера не поддерживающих ее анимации не будет. Если вас это устраивает, можете делать на ней. Полезно будет сначала почитать что это такое. Там же и о поддержке. Кроме этого в сети найдете и еще много ресурсов по ней с примерами различными. Если же вас не устраивает такой расклад, то jQery .animate(). |
<html>
<head>
<meta charset="utf-8">
<style>
div{
margin-top: 0px;
transition: 1s;
width: 20px;
height:20px;
border: 1px solid red;
}
.animate{
margin-top: 320px;
}
</style>
</head>
<body>
<button class="navbar-toggle">rerwrewrwer</button>
<div class="f"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".f").toggleClass("animate");
});
});
</script>
</body>
</html>
вот вам пример из соседней темы |
свойство transition: изначально должно быть у элемента а не присваиваться вместе с классом
|
Если же задача при наведении/уходе мыши конкретному объекту нечто увеличить/уменьшить, то есть простые зависимости, то можно transition. Примеров этому тоже достаточно, вот например, есть там и почитать об этом.
|
winch,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.right{
margin:100px;
}
.left{
margin:0px
}
.animate {
transition: all 1s;
}
.hot{
border: 8px dashed Gray; padding: 5px; height: 100px; width: 100px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var cls = ["left","right"];
$(".hot").on("click" , function() {
$(this).removeClass(cls.reverse().join(" ")).addClass("animate "+cls[0])
})
});
</script>
</head>
<body>
<style type="text/css">
</style>
<div class="hot">click me</div>
</body>
</html>
|
laimas,
кажется css3 сейчас уже практически все браузеры поддерживают. а надо мне вот что: допустим делаю класс .ActiveItem и хочу чтобы при присвоении этого класса элемент плавно стал крупнее и переместился в центр. а при снятии этого класса - элемент тоже плавно вернулся к своему обычному состоянию. но, как уже писал, параметры элементов должны быть не в js, а в css, чтобы настройки можно было делать не меняя скрипты, поэтому animate неподходит. за ссылку спасибо, почитаю. |
j0hnik,
теперь понятно, спасибо, попробую так … кстати, по моим наблюдением при использовании transition изменения происходят не плавно, а какими-то скачками рывками. хотя может это от браузера зависит… |
Цитата:
Это все надо учитывать обязательно. К примеру, есть заказчики, которые требуют поддержки даже IE6, хотя часто бывает, что они даже и не знают есть ли таковые у них посетители. Но это факт, и "бороться" с такими заказчиками очень сложно. Но бывают и оправданными такие действия, тут ничего не попишешь. В общем по данному вопросу только вам решать. Цитата:
|
Цитата:
|
рони,
т. е. идея в том чтобы сделать служебный класс .animate и каждый раз при изменеии состояния элемента добавлять этот класс? ок, попробуем так. |
| Часовой пояс GMT +3, время: 04:45. |