页面加载时的Javascript SlideFadeToggle表单

debugcn 发表于 Dev

DL7812

如果这是一个菜鸟问题，我事先表示歉意。我只是在学习编程/创建一个网站，但找不到解决我问题的方法。

我的网站上有一个表单，单击一个按钮后就会出现/消失。我希望表单在页面加载时被隐藏。到目前为止，表单在加载后即在页面上可见，然后当有人单击按钮时，表单将隐藏/取消隐藏。我当前的代码如下所示。有人可以帮忙吗？谢谢！

<script>

function deselect(e) {
  $('.pop').slideFadeToggle(function() {
    e.removeClass('selected');
  });    
}

$(function() {
  $('#contact').on('click', function() {
    if($(this).hasClass('selected')) {
      deselect($(this));               
    } else {
      $(this).addClass('selected');
      $('.pop').slideFadeToggle();
    }
    return false;
  });

 $('.close').on('click', function() {
    deselect($('#contact'));
    return false;
  });

});

$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'slow', easing, callback);
};

</script>

您可以修改自定义函数以接受计时参数，如下所示：

$.fn.slideFadeToggle = function(easing, timing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, timing , easing, callback);
};

并在ready()处理程序中调用它，并0按时隐藏页面加载时的表单。

function deselect(e) {
  $('.pop').slideFadeToggle(function() {
    e.removeClass('selected');
  });    
}

$(function() {
  $('.pop').slideFadeToggle("linear",0)
  $('#contact').on('click', function() {
    if($(this).hasClass('selected')) {
      deselect($(this));               
    } else {
      $(this).addClass('selected');
      $('.pop').slideFadeToggle();
    }
    return false;
  });

 $('.close').on('click', function() {
    deselect($('#contact'));
    return false;
  });

});

$.fn.slideFadeToggle = function(easing, timing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, timing , easing, callback);
};

form{
  background:dodgerblue;
  overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="pop">
  <input type="text" /><br/>
  <input type="text" /><br/>
</form>
<input type="button" id="contact" value="toggle"/>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。