次のコードスニペットが機能しないのはなぜですか?エラーは発生しませんが、機能しません。ここで
見た空のオブジェクトについて。
<script type="text/javascript">
jQuery(document).ready(function(){
var o = jQuery({});
var block = jQuery('#box');
jQuery('#start').click(function(){
o.queue('custom',function(next){
block.animate({left:"+=500"},1000);
next();
});
o.queue('custom',function(next){
block.animate({left:"-=500"},1000);
next();
});
o.queue('custom',function(next){
block.animate({top:"+=500"},1000);
next();
});
o.queue('custom',function(next){
block.animate({top:"-=500"},1000);
next();
});
o.dequeue('custom');
});
});
</script>
更新1
次のように、デキュー呼び出しの直前と直後にconsole.logを挿入すると、次のようになります。
console.log(o.queue('custom').length);
o.dequeue('custom');
console.log(o.queue('custom').length);
次に、コンソールで40を取得します。関数がキューに追加され、したがってデキューされることを意味します。
更新2
たとえば、ブロックアニメーションの直後にconsole.logを挿入すると、次のようになります。
block.animate({left:"+=500"},1000);
console.log('1');
次に、1 2 3 4を取得します。これは、4つの関数すべてが呼び出されることを意味します。
更新3
私のhtmlは非常に単純です:
1つの入力ボタンと1つのdivがbodyタグにあります。divには次のcssがあります。
width:200px; height:200px; display:block; background:none繰り返しスクロール00緑