javascript - 使用 Javascript 隐藏相对 div

Question

我正在设计一个在发送时弹出“谢谢”消息的联系表单，我需要我的感谢消息相对定位，否则如果用户在动画运行时碰巧滚动消息仍然卡住到位并破坏动画。然而，将 div 相对定位使其在加载之前保持在原位，我需要的是一种在按下发送按钮之前让 div 显示:无或不透明度:0 的方法，这可能吗？

这是一个 http://jsfiddle.net/gcQ8f/解释我正在努力实现更好的目标

下面是我正在使用的 Javascript

$(document).ready(function(){
$(".send-button").click(function(){

$("#contact-form") .delay(1000) .animate({ height:'toggle', opacity:'toggle' }, (400));

$("#contact-form") .delay(3000) .animate({ height:'toggle', opacity:'toggle' }, (400));
$(".contact").reset();
});
});

任何帮助将不胜感激:)

谢谢大家!

Answer 1

只需为您的 DIV 分配一个 ID 或类(例如 id="myThankYouDIV")并在您的 CSS 中使用 display: none 隐藏它。然后当你准备好显示它时(当你点击按钮时)，只需调用 $('#myThankYouDIV').show() $('#myThankYouDIV').fadeIn( )。

编辑:我想我有点误解了你的问题。您想在动画完成后显示“谢谢”消息，对吗？您仍然需要使用 CSS 隐藏它，但要显示它只需执行以下操作:

$("#contact-form") .delay(3000) .animate(
    { height:'toggle', opacity:'toggle' },
    400,
    function(){
        // animation is complete
        $('#myThankYouDIV').fadeIn();
    }
);

;