2

我需要使用 jQuery 的 animate() 为背景设置动画rgba(255,255,255,0.5)，而rgba(255,255,255,0.9)无需使用 jquery.color 插件和更改 CSS 不透明度。背景颜色始终相同（白色），我只需要为 rgba 的alpha设置动画。有什么建议吗？

4

4 回答 4

1

您可以使用带有所需动画的预制 CSS 类，然后使用 jQuery 来打开/关闭该类。

这是一个工作小提琴：https ://jsfiddle.net/syoels/moL1q6ea/

$('#button1').click(function() {
  $('.square').removeClass('fadeMeIn').addClass('fadeMeOut');
});

$('#button2').click(function() {
  $('.square').removeClass('fadeMeOut').addClass('fadeMeIn');
});
.square {
  height: 50px;
  width: 50px;
  margin: 10px;
  background-color: rgba(255, 0, 0, 0.8);
}
.fadeMeOut {
  -webkit-animation: faeOutRGBA 1s linear;
  -moz-animation: faeOutRGBA 1s linear;
  -o-animation: faeOutRGBA 1s linear;
  animation: faeOutRGBA 1s linear;
  background-color: rgba(255, 0, 0, 0);
}
.fadeMeIn {
  -webkit-animation: faeInRGBA 1s linear;
  -moz-animation: faeInRGBA 1s linear;
  -o-animation: faeInRGBA 1s linear;
  animation: faeInRGBA 1s linear;
  background-color: rgba(255, 0, 0, 0.8);
}
@-webkit-keyframes faeOutRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0.8)
  }
  100% {
    background-color: rgba(255, 0, 0, 0);
  }
}
@-moz-keyframes faeOutRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0.8);
  }
  100% {
    background-color: rgba(255, 0, 0, 0);
  }
}
@-o-keyframes faeOutRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0.8);
  }
  100% {
    background-color: rgba(255, 0, 0, 0);
  }
}
@keyframes faeOutRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0.8);
  }
  100% {
    background-color: rgba(255, 0, 0, 0);
  }
  ;
}
@-webkit-keyframes faeInRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0)
  }
  100% {
    background-color: rgba(255, 0, 0, 0.8);
  }
}
@-moz-keyframes faeInRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0);
  }
  100% {
    background-color: rgba(255, 0, 0, 0.8);
  }
}
@-o-keyframes faeInRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0);
  }
  100% {
    background-color: rgba(255, 0, 0, 0.8);
  }
}
@keyframes faeInRGBA {
  0% {
    background-color: rgba(255, 0, 0, 0);
  }
  100% {
    background-color: rgba(255, 0, 0, 0.8);
  }
  ;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square"></div>
<button id="button1">fade out</button>
<button id="button2">fade in</button>

于 2016-03-20T15:11:10.980 回答
1 
var $obj = $('.selector');
$obj.css({volume: 50});
$obj.animate({volume: 90}, {
    duration: 200, // default 400
    step: function (n, t) {
        $(t.elem).css({background: 'rgba(255,255,255,'+n/100+')'});
    }
});

jQuery动画

也许你还需要：

if (!$obj.is(':animated')) {
    $obj.animate(...);
}
于 2017-03-27T02:06:50.723 回答
0

唯一的方法是使用 css 不透明度。事实上，jQuery 的 animate() 也使用了它。

于 2011-07-19T08:34:38.627 回答
0

例如像这样的东西？

http://jsfiddle.net/YZKKp/13/

于 2011-07-19T08:38:48.493 回答