CODEWITHSUNDEEP
jqueryhtml
stafilo
stafilo

Reputation: 83

Blur everything except one div

How can I blur everything with javascript click except one element .personalPhoto and toggle it, I tried this but not working

    function photoCheck(){
        $('.personalPhoto').click(function(){
            $(this).toggleClass('aaasssddd');
            if($(this).hasClass('aaasssddd')){
                $(this).css({'transform':'scale(2.5)'});
                $(window > this).css({'filter':'blur(2px)'});
            } else {
                 $(this).css({'transform':'scale(1)'});
            }
        })
    }
    photoCheck();

<div class="personalPhoto"><img src="images/camera.png"></div>

Upvotes: 1

Views: 123

Answers (2)

Reverend Pete
Reverend Pete

Reputation: 815

You're only toggling the blur of the one photo, not all the other photos. So you would want something like this:

function photoCheck(){
    $('.personalPhoto').click(function(){
        // blur all the photos
        $('.personalPhoto').each(function() {
            $(this).css({'transform':'scale(2.5)'});
            $(window > this).css({'filter':'blur(2px)'});
        });
        // then unblur the clicked photo
        $(this).css({'transform':'scale(1)'});
        $(window > this).css({'filter':'blur(0)'});
    })
}
photoCheck();

Upvotes: 1

Souleste
Souleste

Reputation: 1984

You could select all the elements with class .personalPhoto except this one, and blur them:

function photoCheck(){
    $('.personalPhoto').click(function(){
        $(this).toggleClass('aaasssddd');
        $('.personalPhoto').not($(this)).css({'filter':'blur(2px)'});
    });
}
photoCheck();

Upvotes: 1

Related Questions