Jqueryパフ効果が機能していませんか？

Question

ロード時にページにエフェクトを追加しようとしています。しかし、効果$("#toggle").toggle("puff");は機能しません。 $("#toggle").fadeIn("puff");のようなもの。しかし、私はパフ効果を働かせることはできません。標準的なトグルアニメーションを使用するだけです。このパフの効果は私のプロジェクトで必要なものです。それはなぜ機能しないのですか？ これはファイルの外観です。私は、これは

$(document).ready(function() { 
 

 
    $("#showEffect").hide(); 
 
    $("#showEffect").toggle("puff"); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> 
 

 
<div class="card" id="showEffect"> 
 
    <div class="card-body"> 
 
    <h3 class="card-title">Test</h3> 
 
    </div> 
 
</div>

Answer 1

悪い間違いであればそうならば私の推測では、あなたはそれが「パフ」開きたいということで、私はこれに非常に新しいですhttps://api.jqueryui.com/puff-effect/にとても残念この効果を見ましたあなたはこのように、.hide()の代わりに.toggle()関数を呼び出すことになるでしょう：

$(document).ready(function() { 
 
    $("#showEffect").toggle(); 
 
    $("#showEffect").toggle("puff"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> 
 

 
<div class="card" id="showEffect"> 
 
    <div class="card-body"> 
 
    <h3 class="card-title">Test</h3> 
 
    </div> 
 
</div>

ここでは、このような場合は理由として私の推測です：.hide()がないのに対し、

.toggle()はおそらく、isOnのような変数を設定しますので、あなたはfalseからisOnを設定する、すぐに非表示にするには何の影響もない最初の時間.toggle()を呼び出しますその後、再度.toggle()と呼び出してください。 2番目の.toggle()isOnはであり、これをエフェクトで閉じるのではなく、エフェクトで開きます。

Answer 2

私はあなたが不足していることを考える：

<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

と

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 

をしかし、あなたはロードに時間を隠しているような効果がなる、負荷にセンス使用トグルをしません常に消えます。Toggleは、クリックイベントのようなものではなく読み込み時に使うのに便利です。