jquery - 动画 div 然后淡出另一个 div

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 元素内），我想我'我在这里朝着正确的方向前进，但似乎无法使其正常工作。

作为一个 jQuery 新手，我不明白为什么在 animate 函数之后没有进行回调？

编辑：

下面我发布了我正在尝试治疗的完整功能。我试图让函数淡出将内容更改为嵌套在每个 li 中的 div 的内容。目前我只使用其中一个的内容，当我来到它的基础上时，我会越过那座桥。

该函数将 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);

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/