Toggle between two different click events using jQuery?

Question

So...I am having a bit of trouble trying to create a toggle effect with jQuery that allows for the alternation between two different click events on an li tag.I want the li tag to fade to 0.5 opacity when clicked and when clicked again to revert back to the original state.

Any help would be appreciated and feel free to recreate on jsfiddle :D

The code that I have so far is:

HTML

<div>
    <li><a href="#">Click</a></li>
</div>

jQuery

$(document).ready(function() {
    $('li').toggle();
});

ahren · Accepted Answer · 2013-10-18 00:35:31Z

2

Check for its current state before proceeding.

Also, <li>'s must have <ul> or <ol> as a parent element.

$('li').on('click', function(e){
  e.preventDefault();
  if($(this).css('opacity') != 1){
    $(this).fadeTo(300,1);
  }else{
    $(this).fadeTo(300,0.5);
  }
});

Demo: http://jsfiddle.net/PZ96m/

edited Oct 18, 2013 at 0:35

answered Oct 18, 2013 at 0:31

ahren

17k5 gold badges52 silver badges70 bronze badges

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

Collectives™ on Stack Overflow

Toggle between two different click events using jQuery?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related