gpt4 book ai didi

html - 单击图像将 div 向上移动,然后再次单击以使用 jQuery 将其向后移动

转载 作者:行者123 更新时间:2023-11-28 02:49:16 24 4
gpt4 key购买 nike

我有一个距顶部 300 像素的 div,div 顶部有一个向上箭头图像。

我希望用户单击向上箭头图像,使此 div 上升 300px,然后向上箭头图像变为向下箭头图像,然后当用户单击向下箭头图像时,此 div 返回向下 300px 到这是原来的位置。

我想用 jQuery 来做这件事。

使用响应,这就是我的标记现在的样子:

$(function() {
$('.container img').click(function() {
$('.container').animate({top:-276});
});
$('.container img').click(function() {
$('.container').animate({top:0});
});
});
.container{
border:1px solid gray;
margin-top:300px;
height:800px;
padding:50px;
position:relative;
}

.container img{
position:absolute;
top:-22px;
width:25px;
height:25px;
}
<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>

div 只是上下移动而不会停在顶部。

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

最佳答案

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

像这样但是有 2 个状态,从一个切换到另一个:

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

关于html - 单击图像将 div 向上移动,然后再次单击以使用 jQuery 将其向后移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40054406/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com