0 
$('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);
4

1 に答える 1

0

jsfiddle を機能させるためだけにonload、js が DOM にアクセスできるようにするなど、多くのことを変更しました。コードでは、js が$(document).ready()... 内にあることを確認する必要があります。その後、いくつかの変更を加えました。

  • #nav の最初の li に「blobbed」クラスを追加
    $(this).children().first().addClass("blobbed");
  • イベントがトリガーされたときに、ブロブされたクラスを、イベントをトリガーした li だけになるように変更します $('li').removeClass("blobbed");
    $(this).addClass("blobbed");
  • アニメーションをこの条件内に配置します。
    if(!$(this).hasClass("blobbed"))
  • fadeOutものを開封した
  • $('li:not(#blob)', nav).on("mouseover", function () {..の代わりに使用$('li:not(#blob)', nav).hover(function () {

詳細と実際の動作については、こちらをご覧ください:
http://jsfiddle.net/fWP5u/2/

于 2013-05-22T20:22:08.733 に答える