您应该使用class属性来对公共元素进行分组，并在绑定到它们的函数中使用DOM遍历来创建公共逻辑并遵守DRY原则。
第一个
要停止当前显示的表单，请先淡出再放大，请尝试以下操作：

$('.trigger').click(function () {
    var currentId = '#' + $('.form-container:visible').prop('id');
    var newId = $(this).data('rel');
    $('.form-container').fadeOut();
    if (currentId != newId) {
        $(newId).fadeIn();
    }
});

Example fiddle

我将向所有表单添加一个类（例如“.formHidden”）。
然后，每次单击表单时，

jQuery("#enquiry").click(function () {
    jQuery("#enquiry-form").fadeToggle();
    jQuery("#enquiry-form").removeClass("formHidden")
         .siblings().addClass("formHidden");
});

(this当然，代码只是针对第一个。您需要在其他的类上复制它）。当然，您需要将适当的css display:none应用于“.formHidden”类。

编辑：

一种更简洁的方法：

<section class="cta-buttons">
    <div id="callbacks">
        <div id="callback"><span class="btn"><?php _e( 'Request Callback', 'bonestheme' ); ?></span></div>
        <div id="enquiry"><span class="btn"><?php _e( 'Make Enquiry', 'bonestheme' ); ?></span></div>
        <div id="booknow"><span class="btn"><?php _e( 'Book Now', 'bonestheme' ); ?></span></div>
    </div>

    <div id="formcallbacks">
        <?php // FORMS TRIGGERED ON CLICK ?>
        <div id="callback-form" style="display: none;"><?php vfb_pro( 'id=1' ); ?></div>
        <div id="enquiry-form" style="display: none;"><?php vfb_pro( 'id=2' ); ?></div>
        <div id="booknow-form" style="display: none;"><?php vfb_pro( 'id=3' ); ?></div>
    </div>
</section>

然后呢

jQuery("#callbacks > div").click(function () {
    jQuery("#" + $(this).attr("id") + "-form").fadeIn()
         .siblings().fadeOut();
});

假设<form>元素是父div中唯一的子元素！

检查此JSFIDLE：（http://jsfiddle.net/h7H5H/5）（英文）