jQuery单击功能问题

Question

jQuery的新手，我试图提供一个图像，当我单击它时，我想向上移动一定数量的像素，然后单击另一个图像时，又回到原始状态？

到目前为止，我已经尝试过

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

我只是想不出如何使它向下移动到原来的位置

Answer 1

将其放在document.ready并使用最新的JQuery源文件：

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

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

</script>

Answer 2

试着做：

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

Answer 3

尝试将其包装在ready（）中

而且css（）可能不会应用margins因此请使用javascript marginTop类的方法，

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

现场演示

Answer 4

为了更好的外观，请使用Jani动画

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

Answer 5

根据我对您问题的理解。 我创建了一个小提琴来帮助您找到解决方案。 请查看下面的小提琴和代码段。 感谢您的时间。

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

Answer 6

您要这样吗？

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