Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I target attribute of opacity in jquery?

I know about the attributeContains selector, but how does it apply to style attributes?

I want to find all <a> tags that have their opacity set to 0.

I tried this :

$("a[style*='opacity: 0']")

But it returns nothing.

like image 348
Trip Avatar asked Sep 17 '10 21:09

Trip


People also ask

How do I toggle opacity in JavaScript?

To change the opacity of a div using JavaScript, get reference to the div element, and assign required opacity value to the element. style. opacity property. Opacity value ranges from 0 to 1.

Which jQuery method will be used to fade the element fast and set the opacity?

The . fadeTo() method animates the opacity of the matched elements.

What is the use of opacity in JavaScript?

Definition and Usage The opacity property sets or returns the opacity level of an element. The opacity-level of an element describes the transparency-level, where 1 is not transperant at all, 0.5 is 50% see-through, and 0 is completely transparent.

What is fadeTo?

Definition and Usage. The fadeTo() method gradually changes the opacity, for selected elements, to a specified opacity (fading effect).


2 Answers

The :visible selector will not work because it doesn't give consideration to opacity.

To target just those with a 0 opacity, you could use a .filter() to check the .css() value of the opacity:

$("a").filter( function() {
    return $(this).css('opacity') === '0';
});

You could create your own selector if you'd like:

$.extend($.expr[':'], {
    opacity: function(elem, i, attr){
      return( $(elem).css("opacity") === attr[3] + '' );
    }
});

var $invisible = $("a:opacity(0)");

or

$.extend($.expr[':'], {
    transparent: function(elem, i, attr){
      return( $(elem).css("opacity") === "0" );
    }
});

var $invisible = $("a:transparent");
like image 108
user113716 Avatar answered Sep 22 '22 22:09

user113716


If you want to know whether or not an element is visible, use:

$('a:not(:visible)');
like image 35
jAndy Avatar answered Sep 23 '22 22:09

jAndy