remove jquery css on click

Question

I've got an image on my site, and everytime I click on that, it slides open a box with 4 links. The image starts at 0.6 opacity, and when you click on it to open the box, gets opacity 1. However I would like that when you close the box, the opacity goes back to 0.6.

My code is:

jQuery(document).ready(function() {
    jQuery('.toggle_hide').hide();
    jQuery(".moduletable span").css('cursor', 'pointer').click(function() {
        var $this = $(this);
        $this.css({
            opacity: '1'
        });         
        $('.toggle_hide').not($this.next("div")).fadeOut(300);
        $this.next("div").slideToggle(300);
    });
});

Hope you can help me out.

Best regards, Martin

James Donnelly · Accepted Answer · 2013-10-15 10:29:01Z

1

Simply add a callback function on your fadeOut() to set the opacity back to 0.6 after the animation has completed:

$('.toggle_hide').not($this.next("div")).fadeOut(300, function() { 
    $this.css({opacity:'0.6'});
});

edited Oct 15, 2013 at 10:29

answered Oct 15, 2013 at 10:23

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Rory McCrossan Over a year ago

+1, although the method signature is fadeout(duration, callback)

user2882079 Over a year ago

Hey James, Thanks alot for your assistance. I've tried adding that callback function to my fadeout, but now it seems like it skips the opacity change on the first click, as it remains on 0.6 opacity.

James Donnelly Over a year ago

@user2882079 you have to remember that 300ms is a very short time (1/3 of a second). If you increase this to say 3000 (3 seconds) you'll notice the transition a bit easier. If you want to delay the opacity change, however, you can always use setTimeout. Wrap the $this.css(...) above in setTimeout(function() { $this.css(...) }, 1000) - the 1000 here is 1000ms (1 second).

user2882079 Over a year ago

Hey James. Think you misunderstood me. After I've added the code, the opacity never changes to 1 when I click on the image, like it did before.

James Donnelly Over a year ago

The code that I've supplied doesn't change any of your existing code other than your fadeOut function. Are any JavaScript errors being thrown?

|

Collectives™ on Stack Overflow

remove jquery css on click

1 Answer 1

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Related