I have a simple minimal example of html code containing two boxes:

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

And a css for it which makes the boxes invisible on default:

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

And and, a simple jquery code which is supposed to make the div with a class "current" visible by a certain variable ammount

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

Yet, for an unknown reason this code does not seem to work at all. Setting the css for the current box as static important makes it work nice...for a static value of the opacity. CODEPEN LINK

Any help on the topic would be amazing

I have a simple minimal example of html code containing two boxes:

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

And a css for it which makes the boxes invisible on default:

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

And and, a simple jquery code which is supposed to make the div with a class "current" visible by a certain variable ammount

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

Yet, for an unknown reason this code does not seem to work at all. Setting the css for the current box as static important makes it work nice...for a static value of the opacity. CODEPEN LINK

Any help on the topic would be amazing

• javascript
• jquery
• html
• css

• 1 $('.current').css('opacity', opacity ); try this – shu Commented Feb 15, 2016 at 11:00
• $(".current").css({opacity: opacity }); You don't need !important, as jqery adds style as inline, so it is higher specificitiy than class – The Process Commented Feb 15, 2016 at 11:01
• you should give a text inside of the div, your code is working fine but don't need "cssText", line. – Krish Commented Feb 15, 2016 at 11:04
• @shu. Your answer works well, and is the simpliest. Weird thing is. It works on the minimal pen, but not on my big project... – aln447 Commented Feb 15, 2016 at 11:12

5 Answers 5

use this ::

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

instead of

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

hope this helps :)

change your css to this

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

and your js like this

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

this will give you nice fadeout animation.I edited your codepen link.try this.if this is not what you want tell me.

Try this

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

cssText sets or gets the content of the rules, so you need append it to the existing rule, as it overwrites it.

var opacity = 0.7;
$(".current").css("cssText", $('.current').css('cssText') + "opacity: "+ opacity +" !important;");

Try this. It works.

$(function(){

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