jQuery队列执行误区

Question

我正在尝试在我正在构建的网站中包含内容的 div 上制作阅读更多/隐藏文本效果。我已经制作了我想使用的效果，并且我已经在控制台中一一尝试了它们，它应该可以正常工作，但是当我将它们与队列一起使用时，就会出现问题并且效果会出现故障。

这是演示页面的链接： Demo Link

因此，为了测试演示，您必须单击“Leer mas...”工具提示下的“-”按钮。

打开效果很好，我想做完全一样的关闭效果，只是倒置。我在控制台中使用以下命令对其进行了测试...

$('#texto p').queue(function() { $(this).animate({ opacity: 0 }, 1000); $(this).dequeue(); });    
$('#texto').queue(function() { $(this).animate({ height: '1px' }, 1000); $(this).dequeue(); });
$('#texto p').queue(function() { $(this).hide(0); $(this).dequeue(); } );
$('#texto').queue(function() { $(this).css('height','auto'); $(this).dequeue(); });
$('#texto').queue(function() { $(this).animate({ width: '-=350px' }, 600); $(this).dequeue(); });
$('.content').queue(function() { $(this).animate({ width: '-=350px' }, 600); $(this).dequeue(); });
$('#leer_mas').queue(function() { $(this).fadeIn(500); $(this).dequeue(); }); 

$(this).removeClass('extendido');

顺序基本如下：

1. 我把段落变成透明的。
2. 我将段落的父 div 的高度降低到 1 以隐藏带有溢出的段落。
3. 然后我隐藏段落以便能够使用显示功能。
4. 然后我删除 1px 的高度，让父 div 可用于显示功能。
5. 然后我将父级缩小 350 像素。
6. 我对主 div 做同样的事情。
7. 我展示了“Leer mas...”跨度。
8. 我删除了 .extendido 类。

当我在控制台中逐步执行此操作时，它可以完美运行，但我认为我在队列中做错了。你能帮我修一下吗？

Answer 1

我认为问题在于您的操作与不同的元素相关联：#texto p、#texto、.content 和 #leer_mas。每个都有自己的队列，它们并行运行。所以步骤 1 和 2 是同时发生的，而不是顺序发生的。如果您希望所有步骤按顺序运行，请使用 complete: 选项到 .animate，为其提供链中下一步的功能。

代替

$('#texto p').queue(function() { $(this).animate({ opacity: 0 }, 1000); $(this).dequeue(); });

尝试：

$(document).queue(function() { $('#texto p').animate({ opacity: 0 }, 1000); $(this).dequeue(); });

以及所有其他动画的类似更改。

Answer 2

注意，不确定$(this).removeClass('extendido'); 的$(this) 元素？ .extendido 类附加到下面的 .content 元素

试试

function fn1() {
    return $('#texto p').animate({
        opacity: 0
    }, 1000, dq)
};

function fn2() {
    return $('#texto').animate({
        height: '1px'
    }, 1000, dq)
};

function fn3() {
    return $('#texto p').hide(0, dq);
};

function fn4() {
    return $('#texto').css('height', 'auto')
      .promise().done(dq);
};

function fn5() {
    return $('#texto').animate({
        width: '-=350px'
    }, 600, dq)
};

function fn6() {
    return $('.content').animate({
        width: '-=350px'
    }, 600, dq)
};

function fn7() {
    return $('#leer_mas').fadeIn(500, function () {
        $(".content").removeClass("extendido")
    })
};

$.queue($(".content")[0], "steps", [fn1, fn2, fn3, fn4, fn5, fn6, fn7]);

var dq = function () {
    return $.dequeue($(".content")[0], "steps")
};

dq();

jsfiddle http://jsfiddle.net/guest271314/8ay5s3zg/