Stop after completed

[mrkenng]

Is there a way to stop the loop? I tried using complete function but I guess that is for each item after completed am I right?

[MrSaints]

Yes, that's the general recommendation @mrkenng. Bear in mind that you can call the stop outside the complete handler too. For example:

var morphext = $("#js-rotating").Morphext({
   animation: "rotateIn"
});
var data = morphext.data("plugin_Morphext");

// Start Morphext (autostarts by default)
data.start();

// Stop Morphext
data.stop();

[tomliv]

Here's it what I am attempting:

var morphistAnim = $("#fadeInOut").Morphist({
		animateIn: "fadeIn",
		animateOut: "fadeOut",
		speed: 2000
	});
	var data = morphistAnim.data("plugin_Morphist");

	if (window.matchMedia("(min-width: 48em)").matches){
		$("#fadeInOut").addClass('morphist');
		data.start();		
	} else {
		data.stop();
		$("#fadeInOut").removeClass('morphist');
	}
	$(window).resize(function() {
		var morphistAnim = $("#fadeInOut").Morphist({
			animateIn: "fadeIn",
			animateOut: "fadeOut",
			speed: 2000
		});
		var data = morphistAnim.data("plugin_Morphist");
		console.log(data);
		if (window.matchMedia("(min-width: 48em)").matches){
			$("#fadeInOut").addClass('morphist');
			data.start();			
		} else {
			data.stop();
			$("#fadeInOut").removeClass('morphist');
		}
	});

Narrow width before breakpoint should be no Morphist. Once breakpoint is reached, apply and run Morphist animation. The opposite should work if viewport width goes back down to narrow. I'm close, but getting TypeError t.start is not a function when viewport gets wider and passes the breakpoint.

[MrSaints]

@tomliv

var morphistAnim = $("#fadeInOut").Morphist({
  animateIn: "fadeIn",
  animateOut: "fadeOut",
  speed: 2000
});
var data = morphistAnim.data("plugin_Morphist");

// Stop it by default
// There is likely a more elegant way of doing this.
// For example, some sort of singleton to only run the above when we need to,
// and ensuring we do not call stop if it never started (otherwise, there'll be no instance).
data.stop();

function toggleMorphist() {
  if (window.matchMedia("(min-width: 48em)").matches) {
    data.start();
  } else {
    data.stop();
  }
}

$(window).resize(function() {
  toggleMorphist();
});

I believe something like the above should work. Haven't actually tested it.

[tomliv]

Thanks! I'll give it a run and get back to you here.

[tomliv]

Doesn't seem to be working. Just plays upon load - below the breakpoint - as if I am just simply initializing it. Default stop isn't working. Continues to work after resize.

[lindsayweb]

If anyone needs it, I was able to stop it from looping with this code:

complete: function () { 
      $length = this.phrases.length - 1;    
       if (this.index == $length) {       
      	  this.stop();        
       };
 }