Question

$('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的内容（嵌套在“blob”移动到的li元素内），I我想我在这里正朝着正确的方向前进，但似乎无法使其正常工作。

作为一个jQuery新手，我无法理解为什么在animate函数之后没有进行回调？

编辑：

下面我发布了我正在尝试医生的全部功能。我试图让函数淡出将内容更改为嵌套在每个li中的div的内容。目前我只使用其中一个内容，当我接触它时，我将穿过那座桥。

该函数将blob元素移动到光标悬停在其上的li元素。

js fiddle 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);

Answer 1

我在你的jsfiddle中修改了许多东西只是为了让它工作，包括onload，以便js可以访问DOM。在您的代码中，您必须确保js在$(document).ready()之内...之后我做了一些更改：

将#blobbed“类”添加到#nav中的第一个li $(this).children().first().addClass("blobbed");
触发事件时，将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/

Animate div然后淡出另一个div

1 个答案: