1

我有四个名为 .jobs 的缩略图 div，由 #job-wrap 包围。单击 .job 后，#job-wrap 需要淡出、清空、加载 .job 信息并淡入。但是，一旦清空#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。任何帮助是极大的赞赏。

4

3 回答 3

0

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

于 2013-08-13T05:55:29.157 回答
0

设置一个min-heightto #job-wrapand 而不是淡入和淡出，而是为不透明度设置动画。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);
        });
    });
});
于 2013-08-13T05:57:09.063 回答
0

我建议使用min-heightas well 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>
于 2013-08-13T05:58:17.433 回答