0

当我点击我的菜单栏时，我有一个从顶部向下的 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;
  }   
​

现场演示

4

3 回答 3

2

尝试使用 jquery toggle()。您的代码将如下所示：

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

现场演示

由于似乎不推荐使用 toggle()，因此这是另一个使用 click 的解决方案：

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

现场演示

于 2012-09-05T12:06:22.313 回答
0

您好，您可以这样做，只需分配差异即可。差异中的类。情况和你的工作将完成

$("#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');
  }

});

现场演示

于 2012-09-05T12:07:53.560 回答
0 
$("#top").on('click', function(){
    var elm = $(".block");
    elm.animate({"top": ((parseInt(elm.css('top'), 10)>10?"-=":"+=")+"300px")}, "slow");
});​

小提琴

于 2012-09-05T12:18:13.343 回答