Question

我有一个距离顶部300px的div，以及div顶部的向上箭头图像。

我希望用户点击向上箭头图像，使这个div上升300px，然后向上箭头图像变为向下箭头图像，然后当用户点击向下箭头图像时，此div返回300px到它的原始位置。

我希望用jQuery做到这一点。

使用响应，这就是我的标记现在的样子：

＆＃13;

$(function() {
    $('.container img').click(function() {
        $('.container').animate({top:-276});
    });
    $('.container img').click(function() {
        $('.container').animate({top:0});
    });
});

＆＃13;

.container{
  border:1px solid gray;
  margin-top:300px;
  height:800px;
  padding:50px;
  position:relative;
}
	
.container img{
  position:absolute;
  top:-22px;
  width:25px;
  height:25px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

<div class="container">

	<img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" />

	<p>some text here</p>
	
</div>
  
</body>

＆＃13;

div只是在不停在顶部的情况下上下移动。

另外，如何在第一次点击时将向上箭头更改为向下箭头？然后在第二次点击时再次返回向上箭头？

Answer 1

我会使用jQuery.animate()事件触发的jQuery.click()。

像这样，但是有两种状态，从一种状态切换到另一种状态：

$(function() {
    $('#arrow').click(function() {
        $('#thediv').animate({top:300});
    });
});

Answer 2

$(function()
{
  var expanded = false;
  $('#sidebar').click(function()
                      {
                          if (!expanded)
                          {
                              $(this).animate({'left' : '0px'}, {duration : 400});
                              expanded = true;
                          }
                          else
                          {
                             $(this).animate({'left' : '565px'}, {duration: 400});
                              expanded = false;
                          }
                      });
 });

您可以查看以下链接。可能它可以帮助您找到解决方案。链路： - Javascript move div onClick

单击图像将div向上移动，然后再次单击以使用jQuery

2 个答案: