Transition between clicks on href bootstrap link

Asked

Viewed 151 times

0

I would like that when clicking on the contents, it would disappear smoothly and show the other content.

Only the way I’m doing it, he shows up, disappears and shows up.

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> 
<div class="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>

jquery bootstrap fadein

  • You can put the transition time fadeOut(1000);

  • And yet you keep popping in and out

  • Increase to 2000

  • What is that, when clicking, sum up the text and appear the other, only when clicking, the text first appears, disappears and appears again, increasing the fadeOut to 2000 it just got a little slower, but still the problem continues

  • I suggest you make the first div have the CSS property "display" equal to "block", the second div has the CSS property "display" equal to "None" and use the jQuery function "toggle()" instead of fadein() and fadeOut().

1 answer

0


I decided as follows.

I don’t 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> 
    <div class="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>

Browser other questions tagged jquery bootstrap fadein

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