jQuery UI の例 - 効果 (Effect) - コードワールド

要素にアニメーション効果を適用します。

.effect() メソッドの詳細については、 .effect() の API ドキュメントを参照してください。

.effect() デモ

ボタンをクリックして効果をプレビューします。

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <title>jQuery UI 特效 - .effect() プレゼンテーション</title> 
  <link rel="stylesheet" href ="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
  <script src="//code.jquery.com/jquery-1.9.1.js">< /script> 
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
  <link rel="stylesheet" href="http://jqueryui.com /resources/demos/style.css"> 
  <スタイル> 
    .toggler { 幅: 500px; 高さ: 200px; 位置: 相対; } 
    #button { パディング: .5em 1em; テキスト装飾: なし; 
    } #効果 { 幅: 240px; 高さ: 135px; パディング: 0.4em; 位置: 相対; }
    } #効果 h3 { マージン: 0; パディング: 0.4em; テキスト整列: 中央; } 
    .ui-effects-transfer { ボーダー: 2px 点線グレー; } 
  </style> 
  <script> 
  $(function() { 
    // 現在選択されている特殊効果
    関数を実行します runEffect() { 
      // を取得しますそれからの特殊効果 Type 
      var selectedEffect = $( "#effectTypes" ).val(); 
 
      // ほとんどのエフェクト タイプは、デフォルトでオプションを渡す必要はありません
      var options = {}; 
      // 一部のエフェクトには必須パラメータがあります
      if ( selectedEffect = == "scale" ) { 
        options = { percent: 0 }; 
      } else if ( selectedEffect === "transfer" ) { 
        options = { to: "#button", className: "ui-effects-transfer" }; 
      } else if ( selectedEffect === "サイズ" ) { 
        options = { to: { width: 200, height: 60 } };
      }
 
      // 特殊効果を実行
      $( "#effect" ).effect( selectedEffect, options, 500, callback ); 
    }; 
 
    // コールバック関数 function 
    callback() { 
      setTimeout(function() { 
        $( "#effect" ).removeAttr ( "style" ).hide().fadeIn(); 
      }, 1000 ); 
    }; 
 
    // 選択メニューの値に従って特殊効果を設定
    $( "#button" ).click(function() { 
      runEffect() ; 
      false を返す; 
    } ); 
  }); 
  </script> 
</head> 
<body> 
 
<div class="toggler"> 
  <div id="effect" class="ui-widget-content ui-corner-all" > 
    <h3クラス= "ui-widget-header ui-corner-all">効果</h3> 
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. </p> </div> </div> < 
    select 
  name 
= 
 
" Effects" id="effectTypes"> 
  <option value="blind">ブラインド効果</option> 
  <option value="bounce">バウンス効果</option> 
  <option value="clip ">クリップ効果</option> 
  <option value="drop">ドロップ効果</option> 
  <option value="explode">爆発効果</option> 
  <option value="fade">フェード効果</option> 
  <option value="fold">フォールド効果</option> fold">折り畳み効果</option> 
  <option value="highlight">ハイライト効果</option>
  <option value="puff">パフ効果</option> 
  <option value="pulsate">脈動効果</option> 
  <option value="scale">スケール効果 </option> 
  <option value="shake">シェイク効果</option> 
  <option value="size">サイズ効果</option> 
  <option value="slide">スライド効果 (スライド効果)</option> 
  <option value="transfer">転送効果 (転送効果)</option> 
</select> 
 
<a href="#" id="button" class="ui-state-default ui-corner-all">特殊効果を実行する</a> 
 
 
</body> 
</ html>

イージングデモ

この例では、HTML Canvas 要素を使用して、jQuery UI によって提供されるすべてのイージングを描画します。各グラフをクリックして、イージングの動作を確認します。.

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <title>jQuery UI 特效 - イージング プレゼンテーション</title> 
  <link rel="stylesheet" href="/ /code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
  <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
  <link rel="stylesheet" href="http://jqueryui.com/resources/ demos/style.css"> 
  <スタイル> 
  .graph { 
    float: left; 
    左マージン: 10px; 
  } 
  </style> 
  <スクリプト>
      var drawHeight = 高さ * 0.8、
        クラディウス = 10; 
        ctx = canvas.getContext( "2d" );
 
 
 
      ctx.fillStyle = "黒"; 
 
      // 绘制背景
      ctx.beginPath(); 
      ctx.moveTo(クラディウス、0); 
      ctx.quadraticCurveTo(0, 0, 0, クラディウス); 
      ctx.lineTo( 0, 高さ - 胸郭); 
      ctx.quadraticCurveTo(0、高さ、クラディウス、高さ); 
      ctx.lineTo(幅 - クラディウス、高さ); 
      ctx.quadraticCurveTo(幅、高さ、幅、高さ - クラディウス); 
      ctx.lineTo(幅、0); 
      ctx.lineTo(クラディウス、0); 
      ctx.fill(); 
 
      // 绘制底線
      ctx.strokeStyle = "#555"; 
      ctx.beginPath(); 
      ctx.moveTo( width * 0.1, drawHeight + .5 ); 
      ctx.lineTo( width * 0.9, drawHeight + .5 );
      ctx.ストローク(); 
 
      // 绘制顶線
      ctx.strokeStyle = "#555"; 
      ctx.beginPath(); 
      ctx.moveTo( width * 0.1, drawHeight * .3 - .5 ); 
      ctx.lineTo( width * 0.9, drawHeight * .3 - .5 ); 
      ctx.ストローク(); 
 
      // 绘制 easing 
      ctx.strokeStyle = "white"; 
      ctx.beginPath(); 
      ctx.lineWidth = 2; 
      ctx.moveTo( 幅 * 0.1, drawHeight ); 
      $.each( new Array( width ), function( position ) { 
        var state = position / width, 
          val = impl( state, position, 0, 1, width ); 
        ctx.lineTo( position * 0.8 + width * 0.1, 
          drawHeight - drawHeight * val * 0.7 ); 
      });
      ctx.ストローク(); 
 
      // 点击时动态改变
      graph.click(function() { 
        wrap 
          .animate( { height: "hide" }, 2000, name ) 
          .delay( 800 ) 
          .animate( { height: "show" }, 2000, name ) ; 
      }); 
 
      グラフ.幅(幅).高さ(高さ+テキスト.高さ()+10); 
    }); 
  }); 
  </script> 
</head> 
<body> 
 
<div id="graphs"></div> 
 
 
</body> 
</html>

jQuery UI の例 - 効果 (Effect)

.effect() デモ

イージングデモ

おすすめ