Question

我正在尝试使用我正在构建的网站中的内容对div进行读取更多/隐藏文字效果。我已经制作了我想要使用的效果，并且我已经在控制台中逐一尝试了它们，但是当我将它们用在队列中时，某些东西只会混乱并且效果会发生故障。

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

因此，为了测试演示，您必须点击＆＃39; - ＆＃39; ＆＃39; Leer mas下的按钮...＆＃39;工具提示。

打开效果很好，我想完成相同的关闭效果，只是反转。我使用以下命令在控制台中测试了它......

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

订单基本如下：

我把段落透明了。
我减少段落＆＃39; parent div的高度为1以隐藏带溢出的段落。
然后我隐藏段落以便能够使用节目功能。
然后我删除1px高度以使父div可用于show功能。
然后我用350px减少父母。
我对主要div做同样的事。
我展示了＆＃39; Leer mas ......＆＃39;跨度。
我删除.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)的{{1}}元素？ $(this).removeClass('extendido');类附加到.extendido元素下面

尝试

.content

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

jQuery队列执行误解

2 个答案: