1

我希望实现以下目标：

要单击的图像，它将垂直向上动画一定数量的像素（比如说 50）。然后我想再次单击它，然后它会动画回到原来的位置。

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

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

在这种情况下，内容只是一个 div。我可以做点击按钮的简单教程，它会向左或向右移动 div，但我不能让 div 成为按钮，也不能让它向上或向下。

帮助表示赞赏，

谢谢。

4

3 回答 3

2

尝试以下操作：

HTML

<a href="#" class="moveMe"><img src="..." /><span>Move Me</span>​&lt;/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;
}

​<strong>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 这里

调整 CSSwidth并height根据需要进行调整。

我希望这有帮助！

于 2012-09-05T16:35:30.320 回答
1

尝试这个：

$(document).ready(function() {
    var up = false;
    $("#content").click(function() {
       var newTop = "+=50px";
       if (up) {
          newTop = "-=50px";
       }           
       $(this).animate({ top: newTop}, "slow");
       up = !up;
    });
});

编辑：我在$(document).ready()上面为你添加了。另请注意，在 jsFiddle 中查看此动画时出现的“条纹”仅限于 jsFiddle，并且不会在页面上经常出现。

祝你好运！:)

于 2012-09-05T16:32:45.710 回答
0

试试这个：

$(function(){
 var originalHeight = $("#content").height();
 $("#content").click(function() {
   var $this = $(this);
   $("#content").animate(
      {height: ($this.height()==originalHeight ? (originalHeight+50):originalHeight)},    
      "slow");
  });
});

演示

希望这会有所帮助。

于 2012-09-05T16:32:05.477 回答