Question

我有四个缩略图div，名为.jobs，由＃job-wrap包围。单击.job后，＃job-wrap需要fadeOut，empty，load .job info in和fadeIn。然而，一旦清空了#jobwrap，由于.jobs不再占用任何高度的房地产，我的网站的其余部分都会出现。我如何在清空它后保留＃job-wrap的高度，然后加载内容。

$('.job').click(function(){
    var job = $(this).attr("name");
    var jh = $('#job-wrap').height();
    $('#job-wrap').css('height', jh);
    alert(jh);
    $('#job-wrap').fadeOut(700, function(){
        $(this).empty();
        $(this).load("content.html#" + job, function(){
            $(this).fadeIn(700);
        });
    });
});

这里我试图在空开始之前将当前的#job-wrap的高度设置为自身。（它不起作用，虽然警报确实给出了因站点响应而变化的当前高度）

<div id="job-wrap">
                <a class="link">
                    <div class="job" name="eventuall">
                        <div class="job-img">
                            <img src="images/thumb-eventuall.png" />
                        </div>
                        <div class="job-blurb">
                            <h3>Eventuall</h3>
                            <p>UX Design, Front End </p>
                        </div>
                    </div>
                </a>
                <a class="link">
                <div class="job">
                    <div class="job-img">
                        <img src="images/thumb-audivy.png" />
                    </div>
                    <div class="job-blurb">
                        <h3>Audivy</h3>
                        <p>UX Design</p>
                    </div>
                </div>
                </a>
</div>

这是函数所依据的HTML。非常感谢任何帮助。

Answer 1

.fadeOut()淡化，然后将div设置为display: none; - 也许您可以更改不透明度并使用visibility: hidden;或其他一些保持div位置的属性？这似乎是我发现大多数jQuery方法以display: none;结尾的主要问题---另一方面，如果你有设置大小，你可以在它周围放一个包装然后可能只是把div放在里面它做你现在正在做的事情。

Answer 2

将min-height设置为#job-wrap，而不是淡入淡出，而是为不透明度设置动画。 fade方法在回调函数中将元素display设置为none。

$('.job').click(function(){
    var job = $(this).attr("name");
    var jh = $('#job-wrap').height();
    $('#job-wrap').css('height', jh);

    $('#job-wrap').animate({opacity: 0}, 700, function(){
        $(this).empty();
        $(this).load("content.html#" + job, function(){
            $(this).animate({opacity: 1}, 700);
        });
    });
});

Answer 3

我建议使用min-height以及outerHeight，并添加内部包装器。外包装将保持可见，并在外包装上设置最小高度。内包装div是被清空和隐藏的元素，请参阅http://jsfiddle.net/mf933/1/或使用以下代码：

$('.job').click(function(){
    var job = $(this).attr("name");
    var jh = $('#job-wrap').outerHeight();
    $('#job-wrap').css('min-height', jh);
    alert(jh);
    $('#job-wrap-inner').fadeOut(700, function(){
        $(this).empty();
        $(this).load("content.html#" + job, function(){
            $(this).fadeIn(700);
            // uncomment to reset the min-height after loading
            // $('#job-wrap').css('min-height', 'inherit');
        });
    });
});

HTML：

<h1>Top Content</h1>
<div id="job-wrap">
    <div id="job-wrap-inner"> <a class="link">
        <div class="job" name="eventuall">
                            <div class="job-img">
                                <img src="images/thumb-eventuall.png" />
                            </div>
                            <div class="job-blurb">
                                <h3>Eventuall</h3>
                                <p>UX Design, Front End </p>
                            </div>
                        </div>
                    </a>
     <a class="link">
                    <div class="job">
                        <div class="job-img">
                            <img src="images/thumb-audivy.png" />
                        </div>
                        <div class="job-blurb">
                            <h3>Audivy</h3>
                            <p>UX Design</p>
                        </div>
                    </div>   
                    </a>

        </div>
</div>
<h1>Bottom Content</h1>

如何在没有调整大小的情况下清空并加载div？

3 个答案: