Question

我现在有了这个代码，当我点击它然后fadeOut的时候让元素滑到中间。到现在为止还挺好。但现在我的第二个功能，就是我希望我再次淡入，然后向右滑动。

我有两个问题：

fadeIn没有开始，之后我再也无法向左滑回。

这是我的代码：

$(document).ready(function(){
    $(document).on('click', '.sectiontitel', function(){ 
        $(this).removeClass('on');
        $(this).addClass('off');

        $(this).find('span').animate({
            'margin-right': '350px',
        },200,

            function(){
                $(this).closest('section').find('article').fadeOut(300);
            });

    });

    $(document).on('click', '.off', function(){ 
        $(this).removeClass('off');
        $(this).addClass('on');

        $(this).closest('section').find('article').fadeIn(300)

    },

        function(){
            $(this).find('span').animate({
                'margin-right':'2px',
            },300
            )
        });


});

jfiddle： http://jsfiddle.net/go6dvpuc/

编辑：抱歉忘了jfiddle

Answer 1

这里有几个问题：

您已向同一元素添加了2次点击回调（类sectiontitel和off同时分配，因此两个回调都会在一个点触发）。因此，在您的标记中，向点击目标添加默认的on类，如下所示：
```
<h2 class="sectiontitel on">
```
您的第一个回调现在应该绑定到on类：
```
$(document).on('click', '.on', function(){ ...
```

jQuery fadeIn有第二个参数，在动画完成后调用，所以只需重写你的第二个回调：

$(document).on('click', '.off', function(){ 
    $(this).removeClass('off');
    $(this).addClass('on');
    var $switch = $(this);
    $(this).closest('section').find('article').fadeIn(300, function(){
        $switch.find('span').animate({
            'margin-right':'2px',
        },300);
    });
});

请注意，我记得$switch，导致this内部范围发生变化。见工作demo。

Answer 2

您的代码有几个错误：

function动画span返回被声明为.on第四个参数，而它必须是fadeIn函数的第二个参数。
在提到的函数中，this指向article，而不指向section，因此find('span')找不到任何元素。
点击h2 class='sectiontitel'后，它会同时包含sectiontitel和off个类，因此点击它会触发两个处理程序。

Updated fiddle

$(document).ready(function()
{
    $(document).on('click', '.on', function()
    { 
        $(this).removeClass('on').addClass('off');
        $(this).find('span').animate
        (
            {
                'margin-right': '350px',
            },
            200,
            function()
            {
                $(this).closest('section').find('article').fadeOut(300);
            }
        );  
    });

    $(document).on('click', '.off', function()
    {
        $(this).removeClass('off').addClass('on');
        var section = $(this).closest('section');
        var onFadeIn = function()
        {
            section.find('span').animate
            (
                {
                    'margin-right': '2px'
                },
                300
            )
        };
        section.find('article').fadeIn
        (
            300,
            function()
            {
                onFadeIn();
            }
        );
    });
});

Jquery没有错误但没有工作

2 个答案: