$('li:not(#blob)', nav).hover(function() {
// mouse over
clearTimeout(reset);
blob.animate(
{
left : $(this).position().left,
width : $(this).width()
},
{
duration : options.speed,
easing : options.easing,
queue : false
},
function(){
$('#slate').fadeOut('fast', function(){
$('#slate').html($('.stuff1').html()).fadeIn('fast');
});
}
);
});
アニメーションが発生した後、div (アニメーションに接続されていない) をフェードアウトさせ、非表示の div (「ブロブ」が移動した li 要素内にネストされている) の内容を取得しようとしていました。ここで正しい方向に進んでいますが、これを適切に機能させることができないようです。
jQueryの初心者なので、アニメーション関数の後にコールバックが行われない理由がわかりませんか?
編集：
以下に、私が医者にしようとしている全機能を掲載しました。フェードアウトする機能を取得しようとして、コンテンツを各liにネストされているdivのコンテンツに変更します。現時点では、そのうちの 1 つだけのコンテンツを使用しています。
この関数は、blob 要素を、カーソルが置かれている li 要素に移動します。
js フィドルhttp://jsfiddle.net/CK2pZ/4/
jQuery(function($) {
$.fn.spasticNav = function(options) {
options = $.extend({
overlap : 0,
speed : 500,
reset : 1500,
color : '#0b2b61',
easing : 'easeOutExpo'
}, options);
return this.each(function() {
var nav = $(this),
currentPageItem = $('#selected', nav),
blob,
reset;
$('<li id="blob"></li>').css({
width : currentPageItem.outerWidth(),
height : currentPageItem.outerHeight() + options.overlap,
left : currentPageItem.position().left,
top : currentPageItem.position().top - options.overlap / 2,
backgroundColor : options.color
}).appendTo(this);
blob = $('#blob', nav);
$('li:not(#blob)', nav).hover(function() {
// mouse over
clearTimeout(reset);
blob.animate(
{
left : $(this).position().left,
width : $(this).width()
},
{
duration : options.speed,
easing : options.easing,
queue : false
},
function(){
$('#slate').fadeOut('fast', function(){
$('#slate').html($('.stuff1').html()).fadeIn('fast');
});
}
);
});
}); // end each
};
})(jQuery);