jQuery的动态负载动画

<!DOCTYPE html> 
<html> 
<head> 
<script src="jquery.js"></script> 
<script> 
$(document).ready(function() 
{ 
    $("a").click(function(){ 
     $("#bg").slideToggle(1000,function(){ 
      $("#content").hide('fast',function(){ 
       $("#content").load($(this).attr('href'),function(){ 
        $("#bg").slideToggle(1000); 
       }); 
      }); 
     }); 
    }); 
}); 
</script> 

<style> 
    nav ul li 
    { 
    display: inline; 
    padding: 0px 20px; 
    text-decoration: none; 
    } 

    #bg 
    { 
    transition: all 2s; 
    background-color: gray; 
    z-index:25; 
    width: 100%; 
    height: 0px; 
    } 

</style> 

</head> 

<body> 

<div> 

    <h2>DEMO</h2> 

    <nav> 

     <ul> 
      <li><a href="first.html#content">First</a> 
      <li><a href="second.html#content">Second</a> 
      <li><a href="third.html#content">Third</a> 
     </ul> 

    </nav> 

    <div id="all"> 

<div id="bg"></div>   
     <p id="content">banna third Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> 


    </div> 

</div> 

</body> 
</html>

我还有其他两个HTML文件是这样，其内容已被loade 很大一部分是内容是动态加载，但我希望它有当帘（在这种情况下，第一div与背景灰色）下降，它应该隐藏在用户视图发生时。有多少我试图即时无法达到这种效果。jQuery的动态负载动画

来源

2012-12-31 Code Name

你#bg具有的高度为0;所以你slideToggle是从0到0。因为没有内容你需要定义一个高度。我会建议，但绝对将#bg放在容器的高度，然后你可以滑动顶部，隐藏内容和替换，然后slideUp – Syon

Thanx很多..但我面临的问题是由于铬的允许文件访问从文件标志... :) –

<div id="bg">之后有一个关闭div，你可能并不想把它放在那里（因为现在你的代码显示/隐藏了一个空的div）。

您也想删除CSS中的#bg的height: 0px，因为这意味着您更有效地隐藏了空的div。

有了这两个变化，这种小提琴开始呈现出一些第一个动画：http://jsfiddle.net/PvPv3/

来源

2012-12-31 18:02:55

jQuery的动态负载动画

回答

相关问题