Question

这是我的jQuery：

$('#help').toggle(function () {
  $('#center').animate({
    paddingTop: '70px'
  }, 200);
  $('.child_help').slideDown(300);
}, function () {
  $('#center').animate({
    paddingTop: '50px'
  }, 200);
  $('.child_help').slideUp(300);
});

当我加载页面时，它会切换#help的可见性。我想要做的是当你点击它时，它应向上或向下滑动.child_help，并做一些填充动画。
在jQuery API上，它只说这个：
Note: jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed.

我可以看到触发事件或切换可见性的唯一区别在于$('#help').toggle(function () { do something here })而不是$('#help').toggle('slow');

这里有什么我想念的吗？

编辑：以下是我的HTML

<div id="center">
  <div class="child_help">
    some help text here
  </div>
  <div class="child">
    <b>Account Activation</b>
    <img src="/css/images/help.png" alt="" id="help" />
  </div>
  <form method='post'>
    <input type="text" name="code" value="Code" class="code" />
    <span class="case">Case-sensitive</span>
    <input type="submit" name="submit" value="Activate" class="submit" />
  </form>
</div>

Answer 1

Demo

$(function(){
  $("#help").click(function(){
     var padding="70px";
     if($(".child_help").css("display")=="none") padding="50px";

     $('#center').animate({
         paddingTop: padding
     }, 200);

     $(".child_help").slideToggle();
  });
});

Jquery切换事件切换可见性

1 个答案: