I am trying to make an animation on a navigation menu where when an option is clicked the other two fade out, since .fadeToggle had problems with positioning for me I decided to just animate the opacity to 0, and then back to 1 when clicked on again. (I left the CSS out the the code posted down below)
/

<div id='bckDrp'>
  <div id='nav'>
    <ul id='navLst'>
      <li class='navOp' id='hme'>Home</li>
      <li class='navOp' id='abt'>About</li>
      <li class='navOp' id='prt'>Portfolio</li>
    </ul>
  </div>
</div>

var main = function(){
  $('#hme').click(function(){
    $('#abt, #prt').animate({opacity: 0},300 );
  });
  if($('#abt, #prt').css('opacity') == 0) {
    $('#hme').click(function(){
      $('#abt, #prt').animate({opacity: 1},300 );
    }
  )};
}

$(document).ready(main);

<div id='bckDrp'>
  <div id='nav'>
    <ul id='navLst'>
      <li class='navOp' id='hme'>Home</li>
      <li class='navOp' id='abt'>About</li>
      <li class='navOp' id='prt'>Portfolio</li>
    </ul>
  </div>
</div>

var main = function(){
  $('#hme').click(function(){
    $('#abt, #prt').animate({opacity: 0},300 );
  });
  if($('#abt, #prt').css('opacity') == 0) {
    $('#hme').click(function(){
      $('#abt, #prt').animate({opacity: 1},300 );
    }
  )};
}

$(document).ready(main);

Share Improve this question asked Aug 26, 2016 at 0:34 Joshua 82211 silver badges25 bronze badges

Add a ment |

5 Answers 5

Sorted by: Reset to default 2

The main function only runs once. So you are only doing that if-statement once. Also you are binding click events, which I don't think is what you are expecting it to do. Instead you can simply use a if-else and have your condition inside the click event:

var main = function(){
  $('#hme').click(function(){
    if($('#abt, #prt').css('opacity') == 0) 
        $('#abt, #prt').animate({opacity: 1},300 );
    else
        $('#abt, #prt').animate({opacity: 0},300 );
  });
}

Demo

I would heavily remend handling the animation as a transition in CSS and simply toggling a class.

CSS

#abt, #prt{
    opacity:1;
    transition: opacity 300s;
}

#abt.hide, #prt.hide{
    opacity:0;
}

jQuery

$('#hme').on('click', function(){
    $('#abt, #prt').toggleClass('hide');
});

Change your code :

var main = function() {

    $('#hme').click(function(){

        var op = $('#abt, #prt').css('opacity');

        if (op == 1)
            $('#abt, #prt').animate({opacity: 0},{duration:300} );

        else if(op == 0)
            $('#abt, #prt').animate({opacity: 1},{duration:300} );        
    })
}

$(document).ready(function(){
    main();
})

Final code :

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <div id='bckDrp'>
  <div id='nav'>
    <ul id='navLst'>
      <li class='navOp' id='hme'>Home</li>
      <li class='navOp' id='abt'>About</li>
      <li class='navOp' id='prt'>Portfolio</li>
    </ul>
  </div>
</div>
    
    <script src="https://ajax.googleapis./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
var main = function() {
    
    $('#hme').click(function(){
        
        var op = $('#abt, #prt').css('opacity');
        
        if (op == 1)
            $('#abt, #prt').animate({opacity: 0},{duration:300} );
        
        else if(op == 0)
            $('#abt, #prt').animate({opacity: 1},{duration:300} );        
    })
}
                            
$(document).ready(function(){
    main();
})
    </script>
</body>
</html>

First, you had a typo.... )}; the brackets are reversed. They should be });

Then you could simplify a great deal by just using the built in toggleClass(); function and dynamically getting the clicked element rather than needed to refer to each and every id used. This means you can add/subtract from the #nav list and the function will work regardless of the element ids. The "fade" is all handled in the CSS and you don't need to edit the function at all.

the only thing you'd need to edit from here are nav items in the HTML. (if they change...)

var main = function(){
  $('#nav li').on('click', function() {
      var thisNav = $(this);
       thisNav.toggleClass('active');
      $('#nav li').not(thisNav).toggleClass('fadeit');
    });
}

$(document).ready(main);

ul { list-style: none; margin: 10px; padding:0; }

li { 
      display: block; 
      padding: 5px 10px; 
      margin: 10px 0; 
      text-align: center; 
      text-transform: uppercase; 
      background: #eee; 
      border: 1px solid #ddd; 
  
      /* below handles the opacity fade */
      opacity: 1; 
      transition: all 1s; }


.active, li:hover { background: #fee; }

/* below handles the opacity fade */
.fadeit { opacity: 0; transition: all 1s; }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='bckDrp'>
  <div id='nav'>
    <ul id='navLst'>
      <li class='navOp' id='hme'>Home</li>
      <li class='navOp' id='abt'>About</li>
      <li class='navOp' id='prt'>Portfolio</li>
    </ul>
  </div>
</div>

You need set your code with the sentence if, inside the callback .click; This is necessary because the JS code is loaded only once and in this moment your sentence (if) is read only with the event .loaded()

This is a solution for you:

var main = function(){
    $('#hme').click(function(){
        $('#abt, #prt').animate({opacity: 0},300 );
        if($('#abt, #prt').css('opacity') == 0) {
            $('#abt, #prt').animate({opacity: 1},300 );
        }else{
            $('#abt, #prt').animate({opacity: 0},300 );
        };
    });
}

$(document).ready(main);

Programmer puzzle solving

javascript - How to toggle an animation in Jquery - Stack Overflow

5 Answers 5

CSS

jQuery

Articles related to this article

comment list (0)