Вход

Просмотр полной версии : События по клику

Артур20071
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
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
06.06.2017, 18:20
сделал по вашему примеру, но почему-то не отрабатывает вообще.
может ли быть причиной то, что у класса navbar выставлен position:fixed, хотя вряд-ли. это фиксированное меню, и при его раскрытии в мобильной версии мне нужно чтобы контент съезжал вниз, а при закрытии снова поднимался.
j0hnik
06.06.2017, 18:50
Не вешайте css свойства на айдишники, скорее всего из-за этого.
j0hnik
06.06.2017, 18:58
Уберите с айдишника, margin-top 0; должно заработать
Артур20071
07.06.2017, 10:25
Убрал айдишник, сделал так

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


css

.f{

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

не работает вообще
Артур20071
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
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>