Working with percents in Jquery_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-26 04:46 出处：网络

I\'m building a site with a fluid layout, and therefore need to use percentages in my Jquery sizes and animations. The problem, as I\'ve discovered, is that Jquery doesn\'t understand percentages. Her

I'm building a site with a fluid layout, and therefore need to use percentages in my Jquery sizes and animations. The problem, as I've discovered, is that Jquery doesn't understand percentages. Here's an example of what I'm after:

The page <body> is 100% wide.

<article> is the width of 71% of the page body.

<hgroup> is t开发者_如何学编程he width of 33.2% of <article>

I would like <article> to be the same width as <hgroup> on page load (so that only <hgroup> is showing), then expand to 71% of the page width again when <hgroup> is clicked, allowing the rest of the content within <article> to show. At the same time, I'd like <article> to slide left by the width of <hgroup>, hiding <hgroup>.

Is there any way to make this kind of calculation, or will I have to resort to pixels?

Well, you can define

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

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

plus whatever positioning you need

then

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

plus whatever effects you need

After much frustration and lamentation, I finally got it sorted out. Here's the code I came up with which, miraculously, works:

        $(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();

                  });
        });

I think you are looking for slide effect. Take a look at jquery ui slide effect http://docs.jquery.com/UI/Effects/Slide. It might help you without much coding.