Question

效果检修：效果API已经接受重大改革，引入许多新的API和重写效果来使用CSS剪辑更平滑，更不容易出错的动画。另外，转移效果已被替换为.transfer（）方法。

我有一个持有者div，里面有一个“幻灯片div”。似乎1.12导致滑动/跌落效果最初为display: none，然后是clip？结果是一个波涛汹涌，眨眼的混乱，绝不像幻灯片。

我一直试图解决这个问题。我希望有人遇到这个问题并以某种方式解决了。它也适用于页面上的任何元素。我认为这是与其他CSS或JS的冲突，但我禁用了我能做什么，但仍然没有。

最新版本的Firefox，Chrome和Internet Explorer中会出现此错误。

Answer 1

我无法复制您发布的问题。我使用jQuery 2.2.3和jQuery UI 1.12.0-rc.1设置了效果演示，如下所示：https://jsfiddle.net/Twisty/vrgosgca/

<强> HTML

<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">Effect</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">Blind</option>
  <option value="bounce">Bounce</option>
  <option value="clip">Clip</option>
  <option value="drop">Drop</option>
  <option value="explode">Explode</option>
  <option value="fade">Fade</option>
  <option value="fold">Fold</option>
  <option value="highlight">Highlight</option>
  <option value="puff">Puff</option>
  <option value="pulsate">Pulsate</option>
  <option value="scale">Scale</option>
  <option value="shake">Shake</option>
  <option value="size">Size</option>
  <option value="slide">Slide</option>
  <option value="transfer">Transfer</option>
</select>

<button id="button" class="ui-state-default ui-corner-all">Run Effect</button>

jQuery UI

$(function() {
  // run the currently selected effect
  function runEffect() {
    // get effect type from
    var selectedEffect = $("#effectTypes").val();

    // most effect types need no options passed by default
    var options = {};
    // some effects have required parameters
    if (selectedEffect === "scale") {
      options = {
        percent: 0
      };
    } else if (selectedEffect === "transfer") {
      options = {
        to: "#button",
        className: "ui-effects-transfer"
      };
    } else if (selectedEffect === "size") {
      options = {
        to: {
          width: 200,
          height: 60
        }
      };
    }

    // run the effect
    $("#effect").effect(selectedEffect, options, 500, callback);
  };

  // callback function to bring a hidden box back
  function callback() {
    setTimeout(function() {
      $("#effect").removeAttr("style").hide().fadeIn();
    }, 1000);
  };

  // set effect from select menu value
  $("#button").click(function() {
    runEffect();
    return false;
  });
});

幻灯片动作显得平滑。我选择了这个例子，因为它与你的描述非常吻合。由于您没有包含您正在使用的代码的示例，我不能说为什么您的代码“波涛汹涌”。

起初，我认为你的意思是.slider()。将来，请始终包含示例代码。

Answer 2

问题是由全局CSS引起的，它使用translatez（）来规避Chrome中的视觉故障。它被放置在标准CSS文件之外。

#main-content * {
  webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    transform: translatez(0);
}

根据jQuery UI团队：

效果API已经进行了重大改革，引入了许多新功能 API和重写效果使用CSS剪辑更平滑更少容易出错的动画。

这会影响主要内容中的所有子div，并使用clip干扰动画。值得庆幸的是，这个故障是由于旧的，有时是有问题的影响，因此删除这些线条没有任何损失。

如果您使用translatez（）绕过Chrome视觉故障并收到此错误，您现在可以安全地删除转换。

升级到jQuery UI 1.12破坏了slide（）和drop（）效果

2 个答案: