CODEWITHSUNDEEP
javascriptjqueryhtmlanimation
Joshua
Joshua

Reputation: 822

How to toggle an animation in Jquery

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)
https://jsfiddle.net/L703yvke/

<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);

Upvotes: 1

Views: 4746

Answers (5)

mrjusepelo
mrjusepelo

Reputation: 51

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);

Upvotes: 0

Scott
Scott

Reputation: 21882

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.com/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>

Upvotes: 0

Ehsan
Ehsan

Reputation: 12951

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.com/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>

Upvotes: 0

Donnie D&#39;Amato
Donnie D&#39;Amato

Reputation: 3940

I would heavily recommend 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');
});

Upvotes: 2

Spencer Wieczorek
Spencer Wieczorek

Reputation: 21565

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

Upvotes: 2

Related Questions