使用Jquery中的百分比

我正在构建一个流体布局的网站，因此需要在我的jquery大小和动画中使用百分比。正如我发现的那样，问题在于Jquery不理解百分比。以下是我之后的示例：使用Jquery中的百分比

页面<body>是100％宽。

<article>是页面主体的71％的宽度。

<hgroup>是的<article>

33.2％的宽度我想<article>是相同的宽度<hgroup>在页面加载（使得仅<hgroup>是示出），然后再次扩展到页面宽度的71％当点击<hgroup>时，允许显示<article>内的其余内容。同时，我想<article>向左滑动的宽度为<hgroup>，隐藏<hgroup>。

有什么办法可以做出这种计算，还是我不得不求助于像素？

来源

2011-08-06 ajw-art

太多的无奈与悔恨，我终于之后把它整理出来。下面的代码我想出了其中，奇迹般地，工作原理：

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

        }); 
     });

来源

2011-08-07 22:07:46

如果你的问题解决了，你应该[接受你自己的答案]（http://meta.stackexchange.com/questions/65363/can-i-answer-my-own-question）。 –

我认为你正在寻找幻灯片效果。看看jQuery的UI滑动效果http://docs.jquery.com/UI/Effects/Slide。它可以帮助你没有太多的编码。

来源

2011-08-06 23:58:35 ShankarSangoli

我要去的效果是多单滑手风琴的，因为所涉及的三篇文章。我最大的问题是如何告诉我的剧本，我希望事物的大小以百分比为单位;我会在稍后确定这些影响。 –

好了，你可以定义

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

加任何效果，你需要

来源

2011-08-07 00:51:05 Zhenya

我希望文章/ hgroups是适当的大小，以防某些人因为某种原因没有使用JavaScript查看;这样，内容不会消失。我最终捕获了doc准备好的宽度值并将它们存储为我可以在整个脚本中使用的变量。谢谢，虽然;如果我不需要文章回退到适当的宽度，这将会奏效。 –

然后你可以为文章设置71％的宽度，在hss中设置33.2％，这将是后备。然后在页面负载分别设置为23.6和100通过jquery，然后再次点击71％和33.2％，正如我上面描述的。 – Zhenya

啊，我看到你已经找到了解决办法。没关系。 – Zhenya

使用Jquery中的百分比

回答

相关问题