Форум

Артур20071 · #1 (**permalink**) 06.06.2017, 16:20

Здравствуйте. Кто в курсе, подскажите как навесить прямую и обратную анимацию при клике. То есть при первом клике элементы съезжают вниз, а при повторном, поднимаются вверх. Делаю так, но анимация просто отрабатывает туда-сюда, при каждом клике. Вот код

$(document).ready(function(){
$(".navbar-toggle").click(function() {
      $("#f").animate({ 
        marginTop: "320px",  // отступ от нижнего края элемента станет равным 6 дюймам
     
      }, 800,
         function(){
         $(this).animate({ 
        marginTop: "0px",  // отступ от нижнего края элемента станет равным 6 дюймам
      }, 800);
   
   });      
   });
   });

j0hnik · #2 (**permalink**) 06.06.2017, 17:29

такое лучше делать через тогл класс

<html>
<head>
	<meta charset="utf-8">
	<style>
	.f{
		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>

Артур20071 · #3 (**permalink**) 06.06.2017, 18:20

сделал по вашему примеру, но почему-то не отрабатывает вообще.
может ли быть причиной то, что у класса navbar выставлен position:fixed, хотя вряд-ли. это фиксированное меню, и при его раскрытии в мобильной версии мне нужно чтобы контент съезжал вниз, а при закрытии снова поднимался.

j0hnik · #4 (**permalink**) 06.06.2017, 18:50

Не вешайте css свойства на айдишники, скорее всего из-за этого.

j0hnik · #5 (**permalink**) 06.06.2017, 18:58

Уберите с айдишника, margin-top 0; должно заработать

Артур20071 · #6 (**permalink**) 07.06.2017, 10:25

Убрал айдишник, сделал так

$(document).ready(function(){
			$(".navbar-toggle").click(function(){
				$(".f").toggleClass(".ani");
			});
		});

css

.f{

}
.ani{
margin-top: 320px;
}

не работает вообще

Артур20071 · #7 (**permalink**) 07.06.2017, 11:23

$(document).ready(function(){	
		var count = 0;
$(".navbar-toggle").click(function() {
    count++;
    var isEven = function(someNumber) {
        return (someNumber % 2 === 0) ? true : false;
    };
    if (isEven(count) === false) {
        $(".f").animate({
            marginTop: "320px"
        }, 800);
    } else if (isEven(count) === true) {
        $(".f").animate({
            marginTop: "0px"
        }, 800);
    }
});
 });

laimas · #8 (**permalink**) 07.06.2017, 11:36

<html>
<head>
<style>
div {
    width: 40px;
    height: 40px;
    border:1px solid #777;
    margin-top: 0;
}
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script> 
$(function() {
    var direction = 0;
    $('button').click(function() {
        direction ^= 1;
        $('#as').animate({
            marginTop: 320 * direction
        }, 800)
    });
});
</script> 
</head>
<body>
<div id="as"></div>
<button>GO</button>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript