Animiere div auf Klick nach unten und zurück zur ursprünglichen Position

Question

Ich versuche, ein div zu einer bestimmten Position zu bewegen. Das folgende Stück Code funktioniert:

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

Allerdings würde Ich mag die div in seine ursprüngliche Position animieren, sobald die image1 wieder angeklickt wird. Hat jemand eine einfach zu bedienende Idee dafür? Danke

Answer 1

Ein anderer Weg:

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

Sie können Klasse zu #img hinzufügen! Es wird zum ersten Mal angeklickt und zum zweiten Mal entfernt. Beispiel:

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

Answer 3

Sie können verwenden class mit csstransition dafür. Beispielcode -

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 
}) 

Sie können es umsetzen li ke -

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

Fiddle

Answer 4

Eine weitere Möglichkeit

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

Hier und Beispiel mit codepen Live-Editor

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

Durch toggleClass nutzen wir diese Animation erreichen können.

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

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

Hier JsFiddle Link animate