CODEWITHSUNDEEP
jquerycoffeescript
William Stocks
William Stocks

Reputation: 341

jQuery cycle.all.js first slide timeout

I'm using the cycle.all.js jQuery plugin (http://jquery.malsup.com/cycle/). Right now it's working fine, but I need the first image to have a shorter timeout than all the rest. So when the user first hovers his mouse over the slideshow-div the cycle begins immediately, but after the first slide it changes the timeout to 650. This is how my code looks like right now:

$('div#slideshow').mouseenter(->
  $(this).cycle
    fx: "fade",
    speed: 1
    timeout: 650
  ).mouseleave ->
    $(this).cycle 'stop'

Upvotes: 0

Views: 418

Answers (1)

Matt Browne
Matt Browne

Reputation: 12429

You can do this with the delay option and give it a negative value:

$(this).cycle
    fx: "fade",
    speed: 1
    timeout: 650
    delay: -650
)

Note that this causes it to go immediately to the second slide, which I think is what you want, since the first image of the slideshow is already visible before the user hovers over it.

As Benjamin pointed out, in Coffeescript you can use @ as a shortcut for this:

$('div#slideshow').mouseenter(->
  $(@).cycle
    fx: "fade",
    speed: 1,
    timeout: 650,
    delay: -650  //go to the next slide immediately
  ).mouseleave ->
    $(@).cycle 'stop'

Upvotes: 1

Related Questions