jquery - 垂直jquery动画

Question

我希望实现以下目标:

点击一个图像，它会垂直向上移动一定数量的像素(比如说 50)。我想再次单击它，然后它就会以动画方式返回到其原始位置。

我的代码到目前为止不起作用。

$("#content").click(function() {
$("#content").animate(
        {"left": "toggle"},
        "slow");
});

在这种情况下，内容只是一个 div。我可以完成单击按钮的简单教程，它会将 div 向左或向右移动，但我无法使 div 成为按钮，也无法使其向上或向下移动。

感谢帮助，

谢谢。

Answer 1

尝试以下操作:

HTML

<a href="#" class="moveMe"><img src="..." /><span>Move Me</span>​</a>

CSS

.moveMe {
    position: relative;
    display: block;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

.moveMe img {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 250px;
}

.moveMe span {
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    padding: 10px 0;
    width: 100%;
    color: #fff;
    text-align: center;
    background: #000;
}

​JS

$(document).ready(function(){
    var toggled = false;
    $('.moveMe').bind('click', function(e){
        e.preventDefault();

        if (toggled){
            $('img', this).stop().animate({top: '0'}, 'slow');
            toggled = false;
        } else {
            $('img', this).stop().animate({top: '-50px'}, 'slow');
            toggled = true;
        }
    });
});​

JSFiddle Here

根据需要调整 CSS 宽度 和 高度。

希望这会有所帮助!