スクロールjQueryの

でダウンスライドしてクリックした後、私はこのように次の要素にスクロールする方法を探していました：スクロールjQueryの

http://www.grittirollo.it/

それらの大きい文字をクリックすると、クリックの後に現在の要素へのスクロールを行いますスライドダウン効果。

私の試みがあります：（JSFiddle：http://jsfiddle.net/d272P/）

HTML

<div id="head1">Click</div> 
<div id="child1">Content</div> 

<br/> 

<div id="head2">Click</div> 
<div id="child2">Content</div> 

<br/> 

<div id="head3">Click</div> 
<div id="child3">Content</div>

CSS

#head1{width: 400px; height: 40px; background: orange;} 
#head2{width: 400px; height: 40px; background: red;} 
#head3{width: 400px; height: 40px; background: purple;} 

#child1{width: 300px; height: 700px; background: green; display: none;} 
#child2{width: 300px; height: 700px; background: cyan; display: none;} 
#child3{width: 300px; height: 700px; background: pink; display: none;}

のJavaScript

$('#head1').click(function() { 
    $('#child1').animate({ 
    opacity: 'toggle', 
    height: 'toggle' 
    }, 
    { 
    duration: 750, 
    specialEasing: { 
     width: 'linear', 
     height: 'easeInOutQuad' 
    }, 
    } 
); 
}); 

$('#head2').click(function() { 
    $('#child2').animate({ 
    opacity: 'toggle', 
    height: 'toggle' 
    }, 
    { 
    duration: 750, 
    specialEasing: { 
     width: 'linear', 
     height: 'easeInOutQuad' 
    }, 
    } 
); 
}); 

$('#head3').click(function() { 
    $('#child3').animate({ 
    opacity: 'toggle', 
    height: 'toggle' 
    }, 
    { 
    duration: 750, 
    specialEasing: { 
     width: 'linear', 
     height: 'easeInOutQuad' 
    }, 
    } 
); 
});

出典

2011-10-18 Ivan