Transition between clicks on href bootstrap link

Navigation
0

I would like it to click on the contents, it disappears smoothly and shows the other content.

Just the way I'm doing, it pops up, disappears, and appears. 

var codigo = 0;
$('.btn-news').on('click', function () {
    var news = $('.noticias');


   var id = $(this).data('id');
   codigo = id;


   switch (codigo){
       case 1:
           news.fadeOut();
           news.html('<p style="margin: 1rem 2rem"> Lorem Ipsum é simplesmente .</p>').fadeIn()
           break;
       case 2:
           news.fadeOut();
           news.html(

                    '<p style="margin: 1rem 2rem">É um fato conhecido de todos .</p>').fadeIn();
           break;

   }
});
<!doctype html>
<html>
  <head>
       <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
       <script src="https://code.jquery.com/jquery-2.2.4.js"></script></head><body><divclass="col-lg-12">
                        <div class="col-lg-7"></div>
                        <div class="col-lg-1" ></div>
                        <div class="col-lg-4" ><b>&Uacute;limas Not&iacute;cias</b></div>
                        <div class="col-lg-7" style="border: 1px solid #ccc">
                            <div class="noticias">

                            </div>

                        </div>
                        <div class="col-lg-1" style="width: 1px;"></div>
                        <div class="col-lg-4" style="border: 1px solid #ccc">
                            <ul>
                                <li><a href="#" data-id="1" class="btn-news">Noticia 1</a></li>
                                <li><a href="#" data-id="2" class="btn-news">Noticia 2</a></li>
                               
                            </ul>


                        </div>
                    </div>
 </body>
</html>
    
asked by anonymous 25.05.2017 / 21:53

1 answer

0

I solved it as follows.

I do not know if it's good practice, but it worked. 

$('.btn-news').on('click', function () {
        var news = $('.noticias');
        news.fadeOut();
        
       var id = $(this).data('id');
    


       switch (id){
           case 1:
               
               setTimeout(function (){
                       news.html('<p style="margin: 1rem 2rem"> Lorem Ipsum é simplesmente .</p>').fadeIn()
                },2000);
               
               break;
           case 2:
              setTimeout(function (){
               news.html(

                        '<p style="margin: 1rem 2rem">É um fato conhecido de todos .</p>').fadeIn()
                      },500);
               break;

       }
    });
<!doctype html>
    <html>
      <head>
           <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
           <script src="https://code.jquery.com/jquery-2.2.4.js"></script></head><body><divclass="col-lg-12">
                            <div class="col-lg-7"></div>
                            <div class="col-lg-1" ></div>
                            <div class="col-lg-4" ><b>&Uacute;limas Not&iacute;cias</b></div>
                            <div class="col-lg-7" style="border: 1px solid #ccc">
                                <div class="noticias">

                                </div>

                            </div>
                            <div class="col-lg-1" style="width: 1px;"></div>
                            <div class="col-lg-4" style="border: 1px solid #ccc">
                                <ul>
                                    <li><a href="#" data-id="1" class="btn-news">Noticia 1</a></li>
                                    <li><a href="#" data-id="2" class="btn-news">Noticia 2</a></li>
                                   
                                </ul>


                            </div>
                        </div>
     </body>
    </html>
    
25.05.2017 / 23:17
PHP - upload an image How to select records from a table in the uppercase in postgres?