页面加载时的Javascript SlideFadeToggle窗体

Javascript SlideFadeToggle Form on Page Load

本文关键字：Javascript SlideFadeToggle 窗体 加载      更新时间：2023-09-26

如果这是一个新手问题，我提前道歉。我只是在学习编程/创建一个网站，但我找不到解决问题的方法。

我的网站上有一个表格，点击按钮后会出现/消失。我希望表单在加载页面时隐藏起来。截至目前，表单加载后在页面上可见，然后当有人单击按钮时，表单将隐藏/取消隐藏。我当前的代码如下所示。有人能帮忙吗？谢谢

<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);
};

并在具有CCD_ 2定时的CCD_ 1处理程序中调用它以在页面加载时隐藏表单。

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"/>

相关文章：