stop(x,y) test

by Laurens Maneschijn

HTML

<p>
  using .stop(*, false) , .stop(*) , or just .stop() , when midway during an animation it might break:<br>
  the 'maximum position' is no longer reached after a few clicks.<br>
  this effect is visible in jQuery < v1.7 (e.g. select framework jquery version 1.6.4 just left of this text)<br>
</p>

$('#target')
.stop(<select id="selectstopoption"></select>)
<input id="b" type="button" value=".slideToggle()">

<div class="container fixheight">
  <div id="target" class="inner">
    some content<br>
    fsd sdfklfd lgjdfgdkg dlgk dfl lfdgldf dfgl kdf kljdfgdlfg ldfg ldflk fgl dlkfgdlfgfdlkg dfglk d lkdfg
    dlkf lfdlgl dkfg klfdlkgdfglk klfgdlkg ldfglk ddlfg<br>
    sdflksdf sdlfdsf dsk fsdf klsf lksdflk sddflkslfs sskdl flksdf  jl<br>
    fsd sdfklfd lgjdfgdkg dlgk dfl lfdgldf dfgl kdf kljdfgdlfg ldfg ldflk fgl dlkfgdlfgfdlkg dfglk d lkdfg
    dlkf lfdlgl dkfg klfdlkgdfglk klfgdlkg ldfglk ddlfg<br>
    sdflksdf sdlfdsf dsk fsdf klsf lksdflk sddflkslfs sskdl flksdf  jl<br>
  </div>
</div>

<div>
  see <a href="https://api.jquery.com/stop/" target="_blank">$.stop( [clearQueue ] [, jumpToEnd ] )</a> 
  "Toggling Animations":<br>
  <quote>
    As of jQuery 1.7, stopping a toggled animation prematurely with .stop() will trigger jQuery's internal effects tracking. In previous versions, calling the .stop() method before a toggled animation was completed would cause the animation to lose track of its state (if jumpToEnd was false). Any subsequent animations would start at a new "half-way" state, sometimes resulting in the element disappearing. ...
  </quote>
</div>

CSS

div.container,div.inner{
  margin: 2px;
  padding: 2px;
  outline: 1px dashed blue;
  background: rgba(200,200,255,0.8);
}
div.inner{
  outline-color: red;
  background-color: rgba(255,200,200,0.8);
}
quote{
  display:inline-block;
  padding:5px;
  background-color:#ffeebc;
}

JavaScript

var stopoptions=[
 [],
 [false],
 [true],
 [false,false],
 [false,true],
 [true,false],
 [true,true]
];

$('.fixheight').each(function(i,o){
	$(o).css('height',$(o).css('height'));
});
$.each(stopoptions,function(i,v){
	$option = $('<option>',{value:i,text:''+v});
	$('#selectstopoption').append($option);
});

var flip=false;
$('#b').bind('click',function(e){
	var $d = $('#target'), stopoption = stopoptions[$('#selectstopoption').val()];
  $d.stop.apply($d, stopoption);
//$d.slideToggle(1000);
	flip=!flip;
  $d[flip?'slideUp':'slideDown'](1000);
});