jQuery单击功能问题

Question

New to jQuery I am trying to have an image that when I click on it I want to move up a certain amount of pixels then when another image is clicked go back down to the original state?

so far i have tried this

$(".wrap").click(function(){
  $(this).css("margin-top", "-15px");
});

I just cant figure out how to make it move down to its original place thanks

Answer 1

Place it in document.ready and use latest JQuery source file:

<script type="text/javascript>
$(document).ready(function(){

$(".wrap").on('click',function(){
  $(this).css("margin-top", "-15px");
  });
});

</script>

Answer 2

Try to do:

$("img.wrap").click(function(){
    $("img.wrap").css("margin-top", "0px");
    $(this).css("margin-top", "-15px");
});

Answer 3

Try to wrap it in ready()

And css() may not apply margins so use javascript marginTop like,

$(function(){
    $(".wrap").click(function(){
        this.style.marginTop='-15px';
    });
});

Live Demo

Answer 4

For better look use Jquery animate

$( ".wrap" ).click(function() {
$(this).animate({
 top: "15px",
}, 500);
                              });

Answer 5

As per my understanding of your question. I've created a fiddle to help you find a solution. Please have a look at the fiddle and the code snippet below. Appreciate your time.

$('.sample img').bind('click',function(){
    $('.sample img').removeAttr('style');
    $(this).css('top',-5);    
});

Answer 6

Do you want like this:

var mt = $('.wrap').css('margin-top');
$(".wrap").click(function(){
  if($(this).css('margin-top') == '-15px'){
   $(this).css('margin-top',mt);
  } else {
   $(this).css("margin-top", "-15px");
  }
});