How to Stop and Restart a transition

How to Stop and Restart a transition

I asked this question yesterday, but I have not found it as posted, so please excuse me if it is poosted but I cannot find it.  I am new with Jquery and just know some of the basics of JS, so with that as background, here is my question:

I have been able to have a series of images fade in and out with the following Jquery code:

$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
    $('.fadein :first-child')
    .fadeOut(500)
    .next('img')
    .fadeIn(500)
    .end()
    .appendTo('.fadein');
    }, 2000);
});

However, I want to add two buttons: Stop and Resume.  I would think that interval needs to be stopped and restarted, but I do not know where or how to add that.  Suggestions/help would be appreciated.

Todd