Question

当我点击我的菜单栏时，我有一个div从顶部下来。我需要创建一个函数，在再次单击按钮链接时，它返回到顶部。这是我到目前为止所尝试的：

HTML ：

<div id="wrapper"><button id="top">&raquo;</button></div>
<div class="block"></div>

的Javascript ：

$("#top").click(function(){
  $(".block").animate({"top": "+=300px"}, "slow");
});

CSS ：

div {
  position:absolute;
  background-color:#abc;
  left:50px;
  width:90px;
  height:90px;
  margin-top:5px;
}

#wrapper {

    top: 80px;
 }  


.block {
     margin-top:-95px;
  }

Live DEMO

Answer 1

尝试使用jquery toggle()。您的代码看起来像这样：

$("#top").toggle(function(){
    $(".block").animate({"top": "+=300px"}, "slow");
}, function() {
    $(".block").animate({"top": "-=300px"}, "slow");
});

Live DEMO

由于看起来toggle() is deprecated，这是另一种使用点击的解决方案：

$("#top").on("click", function(){
    if(!$(".block").hasClass('down'))
        $(".block").addClass('down').animate({"top": "+=300px"}, "slow");
    else
        $(".block").animate({"top": "-=300px"}, "slow").removeClass('down');
});

Live DEMO

Answer 2

你好，你可以这样做，只需分配差异。不同的课程。情况和你的工作将完成

$("#top").click(function(){
  if($(".block").hasClass('Down')==false && $(".block").hasClass('Stop')==false)
  {
    $(".block").animate({"top": "+=300px"}, "slow").addClass('Down');
  }
  else
  {
        $(".block").animate({"top": "0px"}, "slow").removeClass('Down').addClass('Stop');
  }

});

Live Demo

Answer 3

$("#top").on('click', function(){
    var elm = $(".block");
    elm.animate({"top": ((parseInt(elm.css('top'), 10)>10?"-=":"+=")+"300px")}, "slow");
});

FIDDLE

Jquery动画div和返回函数

3 个答案: