Add Transition to Code

Asked

Viewed 42 times

0

I’m using this code to show and hide Ivs as you click. But it doesn’t show any transition and looks very "dry" when clicking. I don’t really know how to work Javascript, so I’m having problems.

function mostra(theId){
var theArray= new Array('thms', 'pgs');
w=document.getElementById(theId)
    if(w.style.display=="block"){w.style.display='none';}else{ 

        for(i=0; i<theArray.length; i++){
          if(theArray[i] == theId){
            w.style.display='block';
          }else{
            document.getElementById(theArray[i]).style.display='none';
            }
        }
    }

}
#thms, #pgs{margin-top: 40px;}
.t, .p{cursor: pointer;}
<div class="menu">
                <a onclick="mostra('thms')" class="t";>themes</a>
                <a onclick="mostra('pgs');" class="p">pages</a>
             </div>
             
             <div id="thms" style="display:none;">
                 <ul>
                     <li><a href="/">all themes</a></li>
                     <li><a href="/">one column</a></li>
                     <li><a href="/">+two columns</a></li>
                     <li><a href="/">minimalist</a></li>
                     <li><a href="/">full sidebar</a></li>
                     <li><a href="/">infinite scroll</a></li>
                     <li><a href="/">load more</a></li>
                     <li><a href="/">250px</a></li>
                     <li><a href="/">400px</a></li>
                     <li><a href="/">500px</a></li>
                     <li><a href="/">540px</a></li>
                     <li><a href="/">multi post sizes</a></li>
                 </ul>
             </div>
             
             <div id="pgs" style="display:none;">
                 <ul>
                     <li><a href="/">all pages</a></li>
                     <li><a href="/">minimalist</a></li>
                     <li><a href="/">grid</a></li>
                     <li><a href="/">portifolio</a></li>
                     <li><a href="/">blogroll</a></li>
                     <li><a href="/">about</a></li>
                     <li><a href="/">all in one</a></li>
                     <li><a href="/">tags pages</a></li>
                 </ul>
             </div>

javascript

  • jQuery is good at doing these things.

  • There is a very cool and easy to move lib that might make your life easier to do this kind of work is called anime.js https://animejs.com/

1 answer

0


As commented, you can use Jquery for this, here is a small example.

<!DOCTYPE html>
<html>
<head>
    <title>Animação com Jquery</title>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <style>
       #thms, #pgs{margin-top: 40px;}
	  .t, .p{cursor: pointer;}
    </style>
</head>
<body>
  
	
	<div class="menu">
		<a id="btn_thms" class="t";>themes</a>
        <a id="btn_pgs" class="p">pages</a>
	</div>
	
	<div id="thms" style="display:none;">
		 <ul>
			 <li><a href="/">all themes</a></li>
			 <li><a href="/">one column</a></li>
			 <li><a href="/">+two columns</a></li>
			 <li><a href="/">minimalist</a></li>
			 <li><a href="/">full sidebar</a></li>
			 <li><a href="/">infinite scroll</a></li>
			 <li><a href="/">load more</a></li>
			 <li><a href="/">250px</a></li>
			 <li><a href="/">400px</a></li>
			 <li><a href="/">500px</a></li>
			 <li><a href="/">540px</a></li>
			 <li><a href="/">multi post sizes</a></li>
		 </ul>
	 </div>
             
	 <div id="pgs" style="display:none;">
		 <ul>
			 <li><a href="/">all pages</a></li>
			 <li><a href="/">minimalist</a></li>
			 <li><a href="/">grid</a></li>
			 <li><a href="/">portifolio</a></li>
			 <li><a href="/">blogroll</a></li>
			 <li><a href="/">about</a></li>
			 <li><a href="/">all in one</a></li>
			 <li><a href="/">tags pages</a></li>
		 </ul>
	 </div>
	 
</body>
<script>
    $(document).ready(function () {
       
	  $('#btn_thms').click(function () {
		   $('#pgs').hide(); 
		   $('#thms').show( "slow"); 
		   $("#thms").animate({height: '400px', opacity: '0.4'},700);
		   $("#thms").animate({width: '500px', opacity: '1'}, 1000);
        });
		
		$('#btn_pgs').click(function () {
            $('#thms').hide(); 
			$('#pgs').show('slow'); 
            $("#pgs").animate({left: '100px'}, "slow");
			$("#pgs").animate({fontSize: '3em'}, "slow");
        });
		
		
    });
	
	
</script>
</html>

You can take a look at the Animate effect, here are some tutorials with other examples:

http://www.eduardocs.com/artigos/tutorial-com-jquery-animate.html https://spigandoeaprendendo.wordpress.com/2014/03/05/jquery-animacoes-customizadas-com-o-metodo-animate/ http://www.robsonmoulin.com.br/artigos/front-end/site-ancora-simples-com-efeito-animate-do-jquery/

  • Thank you! I made some changes to the animations and added with the filter Isotope and stayed the way I wanted.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.