Question

我正在尝试在加载时为我的页面添加效果。但效果$( "#toggle" ).toggle( "puff" );不起作用。 $( "#toggle" ).fadeIn( "puff" );之类的工作。但我不能让粉扑效果起作用。它只使用标准切换动画。这个抽吸效果正是我在项目中所需要的。为什么不起作用？这就是文件的样子。我在https://api.jqueryui.com/puff-effect/上看到了这个效果。我对此很陌生，如果这是一个错误的话，那就很抱歉

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

我的猜测是你想要它＆＃34; puff＆＃34;如果是，请打开.toggle()函数而不是.hide()，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

我猜这是为什么会这样：

.toggle()可能会设置一个变量，如isOn，而.hide()不会，所以你第一次调用.toggle()没有任何影响，立即隐藏哪些集合isOn到false，然后再次使用效果调用.toggle()。在第二个.toggle() isOn上false，这意味着.toggle()将使用效果将其打开，而不是通过效果关闭它。

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">

但没有意义使用切换加载，因为你隐藏了加载时间，效果总是淡入。切换对于点击事件但不在加载时使用很有用。

Jquery粉扑效果不起作用？

2 个答案: