【jQuery】ボタン押下、ある部分がフェードして画面遷移

by tea4two

HTML

<p class="nav_image"><a href="http://yahoo.com/">あららら</a></p>
<br />
<br />
<br />
<p class="page_box_fade">sample sample</p>
<p class="another_fade">another box to be faded</p>

CSS

.nav_image {
    background-color: #c8c8c8;
    padding: 5px;
}
.page_box_fade {
    width: 200px;
    height: 150px;
    background-color: #dee;
}
.another_fade {
width: 120px;
height: 60px;
background: #666;   
}

JavaScript

$(function() {
    $(".nav_image a").click( function(){
        $('.page_box_fade, .another_fade').fadeOut('300');                                 
        var href = $(this).attr('href');
        setTimeout(function() { window.location.href = href; }, 2000 );
        return false;           
    });
});