1

javascriptコードでdivをスローモーションで表示したい。

function showDiv(divID)
{
       if(document.getElementById(divID).style.display=='none')
       {
           document.getElementById(divID).style.display='block';  
       }
}

ここにdivが表示されますが、スローモーションでは表示されません。誰か助けてもらえますか？前もって感謝します

開発者。

4

5 に答える 5

4

この場合、jQueryは必要ありません。これは基本的なことであり、関数を使用してそれがどのように行われるかを説明しています。

   function showDiv(divID)
   {
       if(document.getElementById(divID).style.display=='none')
       {
           document.getElementById(divID).style.display='block';  
       }
}

関数が実行しているのは、基本的にBOXモデルから要素全体を削除することです（ブロックを切り替えると、要素がBOXモデルから完全に削除されないため、スペースなどを占有しません。ただし、レイアウトの問題が発生する場合と発生しない場合があります）。

スローモーションでアニメーション化するには、タイミング機能が必要です。

タイミング関数は、特定の時間または他のパラメータに応じて、プロパティの値（この場合は不透明度）を与える単純な数学関数です。

それ以外の場合は、フェードするために不透明度などのプロパティを使用する必要があります（不透明度は、要素とその子の透明度を定義するCSSプロパティです）

それでは、JSでsetTimeout関数を使用して非常に基本的な表示/非表示から始めましょう。

function getValue(t,dir){

  if( dir > 0){
   return 0.5*t; /* Y = mx + c  */
  }else{
   return 1-(0.5*t);
  }
  /* 
    Here the slope of line m = 0.5.
    t is the time interval.
  */
}


function animator(divID){
      if(!(this instanceof animator)) return new animator(divID); /* Ignore this */
  var Node = document.getElementById(divID),
      start = new Date.getTime(), // The initiation.
      now = 0,
      dir = 1,
      visible = true;
  function step( ){
    now = new Date.getTime();
    var val = getValue( now - start,dir)
    Node.style.opacity = val;
    if( dir > 0 && val > 1 || dir < 0 && val < 0 ){
      visible = !(visible*1);
      // Optionally here u can call the block & none 
      if( dir < 0 ) { /* Hiding  and hidden*/
        Node.style.display = 'none'; // So if were repositioning using position:relative; it will         support after hide 
      }
      /* Our animation is finished lets end the continous calls */
      return;
    }
    setTimeout(step,100); // Each step is executated in 100seconds
  }
  this.animate = function(){
    Node.style.display = 'block';
    dir *= -1;
    start = new Date.getTime();
    setTimeout(step,100);
  } 
}

これで、関数を呼び出すだけで済みます

  var magician = new animator('divName');

次に、アニメーションを次のように切り替えます

  magician.animate();

今、タイミング機能で遊んで、あなたはあなたが望むどんな可能性も作り出すことができます

  return t^2 / ( 2 *3.23423 );

またはのようなさらに高い多項式

  return t^3+6t^2-38t+12;

ご覧のとおり、この関数は非常に基本的ですが、純粋なjsを使用してアニメーションを作成する方法のポイントを説明しています。後でアニメーションにCSS3モジュールを使用し、javascriptでそれらのクラスをトリガーできます:-)

または、利用可能な場合はCSS3を使用してクロスブラウザポリフィルを作成し（より高速です）、そうでない場合はJSを作成します:-)

于 2012-04-22T10:42:33.057 に答える
3

クロスブラウザソリューション（jQueryなし）：

HTML：

<div id="toChange" ></div>

CSS：

#toChange
{
    background-color:red;
    width:200px;
    height:200px;
    opacity:0;//IE9, Firefox, Chrome, Opera, and Safari
    filter:alpha(opacity=0);//IE8 and earlier
}

Javascript：

var elem=document.getElementById("toChange");
var x=0;

function moreVisible()
{
    if(x==1)clearInterval(t);
    x+=0.05;
    elem.style.opacity=x;
    elem.style.filter="alpha(opacity="+(x*100)+")";
}
var t=setInterval(moreVisible,25);

フィドルのデモンストレーション： http： //jsfiddle.net/JgxW6/1/

于 2012-04-22T09:30:50.360 に答える
2

したがって、jQueryの回答はいくつかありますが、divをフェードするだけでよい場合は、jQueryをお勧めしません。

確かにjQueryは物事を簡単にしますが、単一の単純な機能には多くのオーバーヘッドがあります。

これが純粋なJSでそれをした人です：

純粋なJavaScriptでフェードインおよびフェードアウト

そしてCSS3の例：

Javascriptを使用してCSS3フェードイン効果をトリガーするにはどうすればよいですか？

于 2012-04-22T09:29:15.957 に答える
0

同じようにjquery$.show（'slow'）を使用できます。jqueryを使用せずに同じことを実行したい場合は、効果を自分で表示するために何かをコーディングする必要がある場合があります。jqueryのshowのソースを確認してください。関数http://james.padolsey.com/jquery/#v=1.6.2&fn=show。または、jqueryでフェードインするためにfadein（）を使用することもできます

于 2012-04-22T08:38:46.047 に答える
-1

はい、Jqueryを使用してそれを行うことができます。これが私のサンプル例です

$('#divID').click(function() {
   $('#book').show('slow', function() {
// Animation complete.
  });

}）;

詳細についてはこちらをご覧ください ありがとうございます。

于 2012-04-22T08:39:26.187 に答える