Animate Delay with jquery

$(function() {
    $('a[href*=#]').on('click', function(e) {
        e.preventDefault();
        $('html, body').delay(2000).animate({ scrollTop: $($(this).attr('href')).offset().top}, 0, 'linear');
    });
});

.item {
    width: 400px;
    height: 200px;
    border: 1px solid #fff;
    overflow: hidden;
    text-align: center;
}
.item a {
    width: 30px;
    height: 30px;
    background: #f30;
    overflow: hidden;
}
#left {
    float: right;
    text-align: center;
    color: white;
    text-decoration: none;
    margin-top: 80px;
}
#right {
    float: left;
    text-align: center;
    color: white;
    text-decoration: none;
    margin-top: 80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><divclass="item">
    <img src="1.png" id="1" class="t1">
    <a href="#2" id="left"> » </a>
    <a href="#4" id="right"> « </a>

    <img src="2.png" id="2" class="t2">
    <a href="#3" id="left"> » </a>
    <a href="#1" id="right"> « </a>

    <img src="3.png" id="3" class="t3">
    <a href="#4" id="left"> » </a>
    <a href="#2" id="right"> « </a>

    <img src="4.png" id="4" class="t4">
    <a href="#1" id="left"> » </a>
    <a href="#3" id="right"> « </a>
</div>