Jquery泡芙效果不起作用？

-4

我試圖在加載時向我的頁面添加效果。但效果$("#toggle").toggle("puff");不起作用。像$("#toggle").fadeIn("puff");的工作。但是我無法使粉撲效果起作用。它只是使用標準的切換動畫。這種抽吸效果正是我在我的項目中需要的。爲什麼它不起作用？這是該文件的外觀。我看到https://api.jqueryui.com/puff-effect/這個效果我很新的這個很抱歉，如果這是一個嚴重的錯誤Jquery泡芙效果不起作用？

$(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>

來源

2017-10-16 Rainier laan

您是否包含jQuery UI的JS和CSS？從上面的片段我沒有看到一個。 –

我的猜測是，你希望它「噗」開放，如果是的話，你要調用.toggle()函數，而不是.hide()，像這樣：

$(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>

這裏是我的猜測，爲什麼是這樣的話：

.toggle()可能將像isOn一個變量，而.hide()沒有，所以你打電話.toggle()在第一時間沒有任何效果立即隱藏其中規定isOn到false ，然後再次打電話.toggle()。在第二個.toggle()isOn是false這意味着.toggle()將切換打開效果，而不是關閉與效果。

來源

2017-10-16 12:56:58

我認爲你缺少：

<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對於點擊事件而不是加載時有用。

來源

2017-10-16 13:01:00

Jquery泡芙效果不起作用？

回答

相關問題