Question

我有一个简单的html代码示例，其中包含两个框：

<div class="box current" style="background: red"></div>
<div class="box" style="background: blue"></div>

它的css使得默认情况下盒子不可见：

.box{
  position: absolute;
  width: 50px;
  height: 50px;
  opacity: 0;
}

并且，和一个简单的jquery代码，它应该用一个类＆＃34;当前＆＃34;通过某个变量ammount可见

var opacity = 0.7;
//Yes, the code has to use a variable. 
//NOT a static value;
$(".current").css("cssText", "opacity: " + opacity + " !important;");

然而，由于一个未知的原因，这段代码似乎根本不起作用。将当前框的css设置为静态重要使其工作良好...对于不透明度的静态值。的 CODEPEN LINK

关于这个主题的任何帮助都会很棒

Answer 1

使用此::

$(".current").css("opacity" ,""+ opacity );

而不是

$(".current").css("cssText", "opacity: " + opacity + " !important;");

希望这有助于：）

Answer 2

试试这个

var opacity = 0.7;
//Yes, the code has to use a variable. 
//NOT a static value;
$(".current").css("opacity"+","+ opacity + " !important;");

Answer 3

cssText设置或获取规则的内容，因此您需要将其附加到现有规则，因为它会覆盖它。

(gdb) start
(gdb) display tulip
(gdb) next
(gdb) next
(gdb) ...

Answer 4

将您的CSS改为此

.box{
  position: absolute;
  width: 50px;
  height: 50px;
  display:none;
}

你的js喜欢这个

$(document).ready(function(){
  $(".current").fadeIn(3000);
});

这会给你很好的fadeout动画。我编辑了你的codepen link.try this.if这不是你想要告诉我的。

Answer 5

试试这个。它有效。

$(function(){

   var opacity = 0.7;
   $(".current").css({"opacity": opacity });
});

jQuery cssText不使用变量

5 个答案: