0

私は、人々が私が必要としているものをほぼ正確に見ることができるように、この jFiddle を作成しました..

http://jsfiddle.net/Vjp68/

基本的に、リストの最後の項目は 2 行であり、他の項目よりもわずかに上に移動して灰色のバーの上に移動する必要があります。また、アイテムが消えてからフェードインすると、アイテムは常に表示されるはずです...

js コードをオンラインで入手し、margin-top アニメーションと次の行全体を追加しました。

$("#top ul" + " li:eq(" + j + ")").animate({"margin-top" : "0px"});

残りはすべて元のマークアップです...

したがって、追加した margin-top: -18 アニメーションはすべての項目を上に移動し、上の行を追加して、リストが最後の項目を終了したときに上に移動し続けず、原点に戻ります...

私は実際にそれを適切に設定していません...私が本当に必要としているのは、最初のランスルーのようにリストが上に移動しているかのように表示され続けることです...しかし、それが言うとき

「上に移動する必要がある 2 行の説明」

その下には再び最初の行「Short Company Description 1」があり、無限にループします。

したがって、基本的には、最後のアイテムをもう少し移動する機能を備えたループリストが必要です。または、それがはるかに難しい場合を除き、アイテムをシンプルに保ちたいと考えています。

情報をありがとう!!

4

2 に答える 2

3

このサンプル フィドルを参照してください

function cyclee(){
    $("#top ul" + " li:eq(0)").delay(3000)
        .animate({"opacity" : "0", "margin-top" : "-18"}, 400, function(){
             $("#top ul").append($(this).css("opacity", "1").css("margin-top", "0"));
             cyclee();
            });
};

アニメーション化してデフォルトのcssプロパティを復元した後、最初<li>のものを最後に追加する必要があります。<ul>

于 2013-03-03T14:16:06.503 に答える
1

基本的に、要素の高さを利用して、すべてのループのマージン上部をオフセットできます。無限にループするには、最初のアイテムをアニメーション化し、アニメーション完了のコールバックを追加します。animate complete 関数で、アニメーション アイテムの余白と不透明度をリセットし、ul を追加します (これで、最初のアイテムが の最後のアイテムに<ul>なり、2 番目のアイテムが の最初のアイテムになります<ul>)。その結果、最初の項目をアニメーション化するだけで済みます。


ここにjsfiddleがあります：http://jsfiddle.net/Vjp68/1/

function cyclee(){
    var h =  $("li:eq(0)", self).outerHeight(true) * -1;
    $("li:eq(0)", self).animate({"opacity" : "0", "margin-top" : h + "px"}, delay, function(){
        $(this).css({"margin-top":"0","opacity" : "1"});
        self.append(this);
        cyclee();
    });     
};
于 2013-03-03T13:46:29.353 に答える