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泡芙效果不起作用？

回答

相关问题