Question

我正在构建一个流畅布局的网站，因此需要在我的Jquery大小和动画中使用百分比。正如我发现的那样，问题在于Jquery不了解百分比。以下是我所追求的一个例子：

页面<body>是100％宽。

<article>是页面正文的71％的宽度。

<hgroup>的宽度为<article>

的33.2％

我希望<article>在页面加载时与<hgroup>的宽度相同（因此只显示<hgroup>），然后在{时再次扩展到页面宽度的71％单击{1}}，允许显示<hgroup>中的其余内容。与此同时，我希望<article>向左滑动<article>的宽度，隐藏<hgroup>。

有没有办法进行这种计算，还是我必须求助于像素？

Answer 1

好吧，你可以定义

article {
    width: 23.6%;
    /* that's 33.2% of 71% of 100 */
}

hgroup {
    width: 100%;
    /* that's in relation to article */
}

加上你需要的任何定位

然后

$('article').width($('body').width() / 100 * 71);
$('hgroup').width($('article').width() / 100 * 33.2);

加上你需要的任何效果

Answer 2

经过多次挫折和哀悼之后，我终于把它整理好了。这是我提出的代码，奇迹般地起作用：

        $(document).ready(function() {
            $('section').hide();
            //Capture widths on page load
            var bwidth = $('body').width();
            var awidth = $('article').width();
            var hgwidth = $('hgroup').width();
            $('hgroup').width(hgwidth);
            $('article').width(hgwidth);

            $('hgroup').click(function(){
            //Hide open article
            var close = $('section:visible').parent();
            $(close).children('section').hide().end().width(hgwidth);
            $(close).removeClass('active').css('marginLeft', '+=' +hgwidth).detach().appendTo('body');

            //Hide last Article
                $('body article').last().hide();

            //Show current
            $(this).parent().addClass('active')
                $('.active').animate({
                            width: awidth,
                            marginLeft: '-=' + hgwidth  
                        },500);
                $(this).next().delay(500).fadeIn(50);
                $(this).css('box-shadow','0px 0px 8px #666');

                //Show Next Hgroup
                $(this).parent().nextAll('article:first').show();

                  });
        });

Answer 3

我认为你正在寻找幻灯片效果。看一下jquery ui幻灯片效果http://docs.jquery.com/UI/Effects/Slide。没有太多编码，它可能对你有所帮助。

在Jquery中使用百分比

3 个答案: