You can break .delay() by .dequeue() function
here is example
//this is only for make sure that we skip 'delay', not other function
var inDelay = false;
function start()
{
$('.gfx').animate
({
width: 100
}, function(){inDelay = true}).delay(3000).animate
({
width: 0
}, function(){inDelay = false})
}
function breakTheDelay()
{
if(inDelay)
{
$('.gfx').dequeue();
}
}
http://jsfiddle.net/wasikuss/5288z/
//edit: more complex example provided with logging timestamps and cleanup ( without cleanup, multiple clicks on Start
is unpredictable ) to prove that it works
or below
//this is only for make sure that we skip 'delay', not other function
var inDelay = false;
var ltime = 0;
// console log will aways show 'end' values: 2000, 1000 an 400
// values may be different due to time wasted on calling functions
// sometimes delay is shorten by 0-200ms, it can be caused by js engine probably
function start()
{
cleanup();
ltime = (1*new Date());
$('.gfx').queue('fx', function(next)
{
logtime( 'animate1_start' );
$('.gfx').animate
({
width: 100
}, 2000, function(){logtime('animate1_end');inDelay = true;})
next();
})
.queue('fx', function(next)
{
logtime('delay_start');
next()
})
.delay(1000)
.queue('fx', function(next)
{
logtime('delay_end');
next()
})
.queue('fx', function(next)
{
logtime('animate0_start');
$('.gfx').animate
({
width: 0
}, function(){logtime('animate0_end');inDelay = false;})
next()
});
}
function cleanup()
{
// remove current queue
$('.gfx').clearQueue()
// first animate runned interval. stop it
.stop()
// reset width of element
.css('width',0)
}
function logtime( name )
{
var ntime = (1*new Date());
console.log( name + ': ' + ( ntime - ltime ) );
ltime = ntime;
}
function breakTheDelay()
{
if(inDelay)
{
$('.gfx').dequeue();
}
}
//
// version without 'inDelay' check only if you know what are you doing
// http://jsfiddle.net/wasikuss/hkw9H/
//
.gfx
{
background: red;
width: 0;
height: 10px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button onclick="start()">Start</button>
<button onclick="breakTheDelay()">Can't wait!</button>
<div class="gfx"></div>