4

私のjQueryでは、IDでdivをフェードインしています。フェードインが左から右に「移動」することを望みます。

これまでの私のスニペット：

$('#content').hide().fadeIn(1500);

誰が私を助けることができます？

ありがとうございました！

4

7 に答える 7

4 
 $("#content").hide().show("slide", { direction: "left" }, 1500);
于 2013-08-22T12:28:36.920 に答える
2

これを達成するのは思ったより難しいでしょう。IE8 などの古いブラウザーをサポートする必要がある場合は、さらに困難です。

私が考えることができる最も実用的な解決策は、背景と同じ色のオーバーレイ要素を使用することですが、無地の背景色ではなくグラデーションを使用します。

グラデーションは、背景色を表示しているように見えるように、少なくとも要素のサイズが隠されている無地の色を持ちますが、要素の境界を越えて広がる非表示部分があり、透明にフェードアウトしますその隠れた部分。

次に、グラデーションが徐々に露出し、その背後にあるコンテンツが明らかになるようにオーバーレイをアニメーション化する単純なケースです。

fadeIn()通常の機能はまったく使用しません。横向きのフェードインのように見えますが、技術的な観点からは、要素の上からカードをスライドさせて表示する効果のようなものです。

グラデーションに独自の機能を使用している古いバージョンの IE では、正しく理解するのが難しい場合があります。理論的には可能であるはずですが、IE8 のfilterグラデーションにはかなりの癖があり、このように「巧妙な」ことをしようとすると気がつくかもしれません。

私はあなたのために動くプロトタイプを書く時間はありませんが、うまくいけば、あなたがそれを書き始めるのに十分なスターターになるでしょう.

于 2013-08-22T12:30:32.213 に答える
1

幅と不透明度の 2 つを組み合わせて、CSS トランジションを使用できます。

-webkit-transition: width 500ms ease-in, opacity 1.5s ease-out;
-moz-transition: width 500ms ease-in, opacity 1.5s ease-out;
-o-transition: width 500ms ease-in, opacity 1.5s ease-out;
transition: width 500ms ease-in, opacity 1.5s ease-out;

コンテンツを同じ場所にとどめるには、次のフィドルを参照してください: http://jsfiddle.net/LLn311un/1/

于 2016-08-24T16:48:19.423 に答える
1

//これはあなたが望むものです

var $marginLefty =    $("#content"); // your selector here

$marginLefty.animate({
     height:'toggle',width:'toggle',
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
        $marginLefty.outerWidth() :
        0
    });

以下に編集されたサンプル例

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){

var $marginLefty =    $("#content"); // your selector here

$marginLefty.animate({
     height:'toggle',width:'toggle',
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
        $marginLefty.outerWidth() :
        0
    });
  });
});
</script> 
</head>

<body>
<button>Start Animation</button>

<div id="content" style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
于 2013-08-22T12:57:37.583 に答える