FX Demos: Clicking on current slide re-triggers the fx animations

[softfocus]

On the FX demo page when you click the slide you're currently on it re-triggers the fx animation.

Tested on Firefox Aurora & Chromium 14...

http://proloser.github.com/AnythingSlider/demos.html

[Mottie]

I kinda did that on purpose... is it annoying?

[softfocus]

For my purposes, yes. I'd love to know how to disable this, is there a way to add an event handler to disable this functionality?

[Mottie]

Ok, I've updated the plugin to version 1.7.7.1 and added a stopRepeat option to the FX extension. Use it as follows:

$('#slider')
  .anythingSlider({
    theme: 'default' 
  })
  .anythingSliderFx({
    '.fade' : [ 'fade' ]
  }, {
    stopRepeat : true // stops repeating FX animation when clicking on the same navigation tab
  });

[softfocus]

Thanks for the quick reply & fix! :)

[softfocus]

I don't seem to get the new option to work with custom animations, I'm sure there's a problem in the code somewhere but I can't see it:

    $(function() {
        $('#content').anythingSlider({
           resizeContents: false,
           buildStartStop: false,
           buildArrows: false,
           easing: 'easeOutCubic',
           animationTime:600,
           delayBeforeAnimate:400
        })
        .anythingSliderFx({
        inFx : {
        '#home_container'  : { opacity: 1, duration: 400, easing : 'easeInCubic' },
        '#news_container'  : { opacity: 1, duration: 400, easing : 'easeInCubic' }
        },
        outFx : {
        '#home_container'  : { opacity: 0, duration: 300, easing : 'easeOutCubic' },
        '#news_container'  : { opacity: 0, duration: 300, easing : 'easeOutCubic' }
        },   stopRepeat : true   });

    });

[Mottie]

The code appears to be missing curly brackets around the options, try this:

$(function() {
  $('#content').anythingSlider({
    resizeContents: false,
    buildStartStop: false,
    buildArrows: false,
    easing: 'easeOutCubic',
    animationTime:600,
    delayBeforeAnimate:400
  })
  .anythingSliderFx({
    inFx : {
      '#home_container'  : { opacity: 1, duration: 400, easing : 'easeInCubic' },
      '#news_container'  : { opacity: 1, duration: 400, easing : 'easeInCubic' }
    },
    outFx : {
      '#home_container'  : { opacity: 0, duration: 300, easing : 'easeOutCubic' },
      '#news_container'  : { opacity: 0, duration: 300, easing : 'easeOutCubic' }
    }
  }, {
    stopRepeat : true
  });
});

[softfocus]

Strange, this seems to brake the slider. DreamWeaver also complains about syntax error (dunno if that means anything).

I'm using jquery 1.6.1, and the document is html5. Slider does not work in IE9, Chrome 15 or FF 7alpha...

[softfocus]

Update: version with default animations works fine:

$(function() {
  $('#content').anythingSlider({
    resizeContents: false,
    buildStartStop: false,
    buildArrows: false,
    easing: 'easeOutCubic',
    animationTime:600,
    delayBeforeAnimate:400
  })
  .anythingSliderFx({

'#home_container' : [ 'fade' ],
'#news_container' : [ 'fade' ] },
{ stopRepeat : true

  });  
});

[Mottie]

oh oops... I was distracted and didn't notice the missing bracket. Basically the options are like this:

var options = {
  // slider options
},
effects = {
  // list of effects
},
fxOptions = {
  stopRepeat : true
};

$('#slider')
  .anythingSlider(options)
  .anythingSliderFx(effects, fxOptions);

I fixed the post above.

[softfocus]

That fixed it! Thanks again for your assistance.

[OrangeWacko]

On page refresh with stopRepeat activated, the FX is not loading (at all) the targeted divs... So, the clicking and disabled effect works fine, but try reload that page with that slider and those divs are gone... Any help??

Okay, this seems to be a very tricky feature right now... I see on the demo page for the plugin, the FX does the same thing, and it's driving me crazy because when disabling the FX on navigation click I didn't mean for FX to be gone :) Do we need to set up cookies or any thoughts?

.anythingSliderFx({

    inFx : { 
        '#main-slider p'  : { opacity: 1, right  : 21, duration: 550, easing : 'easeOutBack'},
        '.delight-gallery' : {  opacity: 1, duration: 700, easing : 'easeInSine'}
     },
     outFx : { 
            '#main-slider p'  : { opacity: 0, right  : -210, duration: 550, easing : 'swing' },
            '.delight-gallery' : {  opacity: 0, duration: 150, easing : 'swing'}
         } },

{ animationTime : 0, stopRepeat : true});

[OrangeWacko]

http://www.businessolver.com.demo4.flyinghippo.com/#&panel1-3