Question

我在图形上使用切换来滑出联系表单。问题是，联系表单可以在低分辨率下掩盖图形元素。我认为解决方案是在表单中包含一个“关闭它”，它将使用相同的切换效果。当我将这个元素添加到代码中时，不是与原始图形元素一起工作，而是将链条重新启动，然后将联系表格滑出更远。

网站在这里： http://www.tritonloyaltysupport.com/status

此处切换代码：

$(this).html(div_form); 
//show / hide function 

$('div.contactable').toggle( 
    function() { 
        $('#overlay').css({display: 'block'}); 
        $('#contactForm').animate({"marginRight": "-=0px"}, "fast");
        $('#contactForm').animate({"marginRight": "+=390px"}, "slow");
    }, 
    function() {
        $('#contactForm').animate({"marginRight": "-=390px"}, "slow");  
        $('#overlay').css({display: 'none'}); 
    }
);

Answer 1

您可以尝试将两个切换操作设置为$（）。toggle（）之外的函数;然后将hide函数绑定到新面板。

function show() {
        $('#overlay').css({display: 'block'}); 
        $('#contactForm').animate({"marginRight": "-=0px"}, "fast");
        $('#contactForm').animate({"marginRight": "+=390px"}, "slow");
}

function hide() {
        $('#contactForm').animate({"marginRight": "-=390px"}, "slow");  
        $('#overlay').css({display: 'none'}); 
}

$('div.contactable').toggle(show, hide);

$('button .close', '#contactForm').click(hide);

显然，你会让你改变最后一行来定位你的关闭按钮，但这应该让你开始。

Answer 2

我最终重复使用前一段代码来制作幻灯片，并重新利用它。对于那些感兴趣的人，代码如下：

    $(this).html(div_form);
        $("div.contactable").click( function() {
            if ($("#openCloseIdentifier").is(":hidden")) {
                $("#contactForm").animate({ 
                    marginRight: "0px"
                    }, 500 );
                $("#openCloseIdentifier").show();
            } else {
                $("#contactForm").animate({ 
                    marginRight: "-390px"
                    }, 500 );
                $("#openCloseIdentifier").hide();
            }
        });

Jquery用两个元素切换

2 个答案: