Animate div alt ve orijinal konumuna geri dön

Question

Bir div'i belirli bir konuma taşımayı deniyorum. Aşağıdaki kod parçası çalışıyor:

$('#image1').click(function() { 
    $('#div1').animate({ 
    'marginTop' : "+=160px" 
    }); 
}); 

Ancak, ben image1 tekrar tıklandığında kez orijinal konumuna div animasyon istiyorum. Bunun için herkesin kullanımı kolay bir fikri var mı? Teşekkürler

Answer 1

bir başka yolu:

function firstClick() { 
 
$('#div1').animate({ 
 
    'marginTop' : "380px" 
 
    }); 
 
    $(this).one("click", secondClick); 
 
} 
 

 
function secondClick() { 
 
$('#div1').animate({ 
 
    'marginTop' : "0px" 
 
    }); 
 
    $(this).one("click", firstClick); 
 
} 
 

 
$("#image1").one("click", firstClick);

#div1 { 
 
width: 200px; 
 
    height: 200px; 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="image1">image1</div> 
 

 
<div id="div1"></div>

Answer 2

#img'e sınıf ekleyebilirsiniz! ilk kez tıklandığında ve ikinci kez kaldırıldığında, tıklanarak dalışın bir göstergesi olarak kullanılır. Örnek:

$('#image1').click(function() { 
    if($('#image1').hasClass("clicked")){ 
     $('#div1').animate({ 
     'marginTop' : "-=160px" 
     }); 
     $('#image1').removeClass("clicked"); 
    } 
    else{ 
    $('#image1').addClass("clicked"); 
     $('#div1').animate({ 
     'marginTop' : "-=160px" 
     }); 
    } 
}); 

Answer 3

Bunun için bir classtransitioncss ile kullanabilirsiniz. Örnek kodu -

HTML

<div class="main"> 
    Hello 
</div> 

CSS

.main { 
    background: green; 
    width: 100px; 
    height:100px; 
    margin-top:0px; 
    transition: margin-top 1s; 
} 

.set_margin { 
    margin-top:100px; 
} 

jQuery

$('.main').on('click', function() { 
    $(this).toggleClass('set_margin'); // toggle class on click event 
}) 

Gün içinde bir çok li uygulayabilirsiniz ke -

$('#image1').click(function() { 
    $('#div1').toggleClass('set_margin'); 
}); 

Fiddle

Answer 4

Bir daha yolu

var toggle = true; 
 
$('#image1').click(function() { 
 
    if (toggle) { 
 
    $('#div1').animate({ 
 
     'marginTop': "+=160px" 
 
    }); 
 
    toggle = false; 
 
    } else { 
 
    $('#div1').animate({ 
 
     'marginTop': "-=160px" 
 
    }); 
 
    toggle = true; 
 
    } 
 

 
});

#div1 { 
 
    height: 50px; 
 
    width: 50px; 
 
    background: black; 
 
    border-radius: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="image1">Toggle</button> 
 
<div id="div1"></div>

Answer 5

Burada ve örnek bu animasyonu elde edebilirsiniz toggleClass kullanarak codepen canlı editör

var move = true 
 
$('#image1').click(function() { 
 
    if (move) { 
 
    $('#div1').animate({ 
 
     'margin-left': "+=160px" 
 
    }, move = false); 
 
    } else { 
 
    $('#div1').animate({ 
 
     'margin-left': "0px" 
 
    }, move = true); 
 
    } 
 
});

#image1 { 
 
    width:100px; 
 
    height:100px; 
 
    background:red; 
 
    cursor:pointer 
 
} 
 
#div1 { 
 
    width:100px; 
 
    height:100px; 
 
    background:green; 
 
    margin-left:0px; 
 
}

<div id="image1">ClickMe</div> 
 
<div id="div1"></div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 6

ile. İşte

<style type="text/css"> 
    .animation{ 
     margin-top:160px; 
    } 
</style> 
<script type="text/javascript"> 

$(document).ready(function(){ 
    $('#image1').click(function(){ 
     $('#div1').toggleClass("animation"); 
    }) 
}) 
</script>