Question

我正在显示我的应用中发生的每个更改的背景。但我希望通过一点点过渡来实现这一点，就像一种淡入淡出

这就是我所拥有的

  $('.backdrop').animate({'opacity':'.50'}, 150, 'linear');
  $('.backdrop').css('display', 'block');

现在，我正在使用角度，但因为这是一个指令我这样做：

  <light-box>
    <div class="backdrop" ng-show="displayBackdrop">
      <div class="spinner"></div>
    </div>
  </light-box>

所以，当$rootScope.displayBackdrop = true light-box出现在屏幕上时

.directive('lightBox', function() {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      $('.backdrop').animate({'opacity':'.50'}, 300, 'linear');
      $('.backdrop').css('display', 'block');
    }
  };
});

这里de css

.backdrop
    {
      position:fixed;
      top:0px;
      left:0px;
      width:100%;
      height:100%;
      background:#000;
      opacity: .0;
      filter:alpha(opacity=0);
      z-index:300;
      display:none;
    }

Answer 1

您可以根据需要使用fadeToggle，fadeIn或fadeOut，并在方括号内指定可选参数：

$('.backdrop').fadeToggle([duration], [easing], [complete/callback]);

Answer 2

以下是JQuery过渡的一些演示： 3个参数是“：duration，easing和callback函数。

var test = $('#test'),
  $in = $('#in'),
  out = $('#out'),
  toggle = $('#toggle'),
  to = $('#to');


$in.click(function() {
  test.fadeIn(1000, function() {});
});


out.click(function() {
  test.fadeOut(1000, function() {});
});


toggle.click(function() {
  test.fadeToggle(1000, function() {});
});

to.click(function() {
  test.fadeTo(1000, 0.5, function() {});
});

#test {
  margin: 1.5em auto;
  width: 10em;
  height: 10em;
  background: red;
  border-radius: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p>
  <button id="in">fadeIn()</button>
  <button id="out">fadeOut()</button>
  <button id="toggle">fadeToggle()</button>
  <button id="to">fadeTo()</button>
</p>
<div id="test"></div>

使用jQuery过渡效果

2 个答案: