I want to animate the opacity of all other divs expect one, so I have used css :not property, but it doesn't seem to be working. Because instead of doing what I want, it changed opacity of all div elements including the div which I don't want to be changed... This is my code:
function urlHighlight() {
const queryString = window.location.search
const urlParams = new URLSearchParams(queryString)
const product = urlParams.get('h')
//To check whether Url param and Div with data Id of given Url param exists
if (product && $(`div[data-id=${product}]`).length == 1){
$('html, body').animate({
scrollTop: $(`div[data-id=${product}]`).offset().top - 100
}, 2000);
//I want to change opacity of the div elements which don't have the Url param as value of data-id
$(`body:not(div[data-id=${product}])`).animate({
opacity: 0.5
}, 5000, function(){$(this).removeAttr("style")})
}
}
$(function(){
$.getJSON("data.json", function(data) {
//some functions
urlHighlight()
})
})
What is the problem and how should I fix it?
The selector should be body *:not(div[data-id=${product}]) like this. all tags inside body that are not the set condition.
function urlHighlight() {
const queryString = window.location.search
const urlParams = new URLSearchParams(queryString)
const product = 'test' || urlParams.get('h') //defaulting to test
//To check whether Url param and Div with data Id of given Url param exists
if (product && $(`div[data-id=${product}]`).length == 1){
console.log('in');
$('html, body').animate({
scrollTop: $(`div[data-id=${product}]`).offset().top - 100
}, 2000);
//I want to change opacity of the div elements which don't have the Url param as value of data-id
console.log($(`body *:not(div[data-id=${product}])`));
$(`body *:not(div[data-id=${product}])`).animate({
opacity: 0.5
}, 5000, function(){$(this).removeAttr("style")})
}
}
$(function(){
// $.getJSON("data.json", function(data) {
//some functions
setTimeout(() => {
urlHighlight()
}, 1000);
// })
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div data-id="test" style="height:100px;width:100px">test</div>
<div data-id="testy" style="height:100px;width:100px">test2</div>
</body>