1

構築中のサイトのコンテンツを含む div に、続きを読む/非表示のテキスト効果を作成しようとしています。使用したいエフェクトを作成し、コンソールで 1 つずつ試してみましたが、キューでそれらを使用すると、何かが台無しになり、エフェクトの順序が狂います。

デモ ページへのリンクは次のとおりです: 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. 次に、親を 350px に減らします。
  6. メイン div と同じことを行います。
  7. 「Leer mas...」スパンを表示します。
  8. .extendido クラスを削除します。

コンソールで段階的に実行すると完全に機能しますが、キューに何か問題があると思います。直してもらえますか？

4

2 に答える 2

0

問題は、アクションがさまざまな要素に関連付けられていることだと思います: #texto p、#texto、.content、および#leer_mas。それぞれに独自のキューがあり、並行して実行されます。したがって、ステップ 1 と 2 は順次ではなく同時に発生します。すべてのステップを順番に実行する場合は、complete:オプション to を使用.animateして、チェーンの次のステップの機能を指定します。

それ以外の

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

試す：

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

他のすべてのアニメーションについても同様の変更を行います。

于 2012-09-07T23:25:28.280 に答える
0

?$(this)の要素については不明であることに注意してください。下の部分で要素にアタッチされたクラス$(this).removeClass('extendido');.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/

于 2014-09-15T06:39:47.300 に答える