Twitter API Question posted in
The official Twitter API documentation can be found here.

same transition every time button gets clicked – Twitter API

I’m having an issue with css transitions, just execute transitions by the first time at button gets clicked, after that, output the information without transitions.

How to trigger same transition every time when button gets clicked to output new search?

I’m tried to solve it but just get hide the data, not repeat the first transition

$(document).ready(function(){      
  $('#search').click(function(){
    var searchInput= $('#getInput').val();
    var api = "https://en.wikipedia.org/w/api.php?action=opensearch&search="+searchInput+"&format=json&callback=?"
  
    //console.log(api);
    $.ajax({
      type: "GET",
      url:api,
      async:false,
      dataType: "json",
      success: function(data){
        for(var i=0; i<data[1].length; i++){
          $("#output").prepend("<div class='jumbotron'><a href="+data[3][i]+">"+data[1][i]+"</a><p>"+data[2][i]+"</p></div>");
          $('.effect').css('opacity', 1);
        }
      },
      error: function(errorMessage){
        alert('Error');
      }
    });       
  })     
})
.margin{
  margin-top:1cm;
}

h4 {
  font-family: 'Encode Sans Expanded', sans-serif;
  font-size: 20px;
}

button {
  cursor:pointer;
  color-text: black;
  margin-left: 30px;
  
}

.center{
  margin-left:70px;
}

.effect{
  opacity: 0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <h3 class="text-primary text-center">Wikipedia Viewer</h3>
  <div class="row">
    <div class="col-xs-6 col-md-4"></div>        
    <div class="col-xs-3 col-md-2 margin">
      <h4 class="text-center">Random page</h4>
      <a class="button btn btn-default center" href="https://en.wikipedia.org/wiki/Special:Random">              
        <i class="fa fa-wikipedia-w"></i>              
      </a>
    </div>
    <div class="col-xs-3 col-md-2 margin">
      <div class="well">
        <input class="form-control" placeholder="Enter text" id="getInput">           
        <button class="btn btn-default btn-primary" id="search">Search</button>           
      </div>
    </div>        
  </div>
</div>
<ul class="h4 effect" id="output"></ul>
Tags:

2

Answers


  1. 0
    • You can use the built-in function fadeIn from jQuery along with a class .hide to hide your new elements.

    Execute the fadeIn effect to every new element.

    Look a this code snippet

    $(document).ready(function() {

  $('#search').click(function() {  
    var searchInput = $('#getInput').val();
    var api = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchInput + "&format=json&callback=?"

    $.ajax({
      type: "GET",
      url: api,
      async: false,
      dataType: "json",
      success: function(data) {                  
        for (var i = 0; i < data[1].length; i++) {
          var newElement = $("<div class='hide jumbotron'><a href=" + data[3][i] + ">" + data[1][i] + "</a><p>" + data[2][i] + "</p></div>");
          $("#output").prepend(newElement);                    
          $(newElement).fadeIn(1000);
        }               
      },
      error: function(errorMessage) {
        alert('Error');
      }
    });
  })
});
    .margin {
  margin-top: 1cm;
}

h4 {
  font-family: 'Encode Sans Expanded', sans-serif;
  font-size: 20px;
}

button {
  cursor: pointer;
  color-text: black;
  margin-left: 30px;
}

.center {
  margin-left: 70px;
}

.hide {
 display: none
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <h3 class="text-primary text-center">Wikipedia Viewer</h3>
  <div class="row">
    <div class="col-xs-6 col-md-4">

    </div>

    <div class="col-xs-3 col-md-2 margin">
      <h4 class="text-center">Random page</h4>
      <a class="button btn btn-default center" href="https://en.wikipedia.org/wiki/Special:Random">
        <i class="fa fa-wikipedia-w"></i>
      </a>
    </div>
    <div class="col-xs-3 col-md-2 margin">
      <div class="well">
        <input class="form-control" placeholder="Enter text" id="getInput">
        <button class="btn btn-default btn-primary" id="search">Search</button>
      </div>
    </div>
  </div>
</div>

<ul class="h4 " id="output"></ul>

    Resource

    Login or Signup to reply.
  2. 0

    Did you wish to apply the effect to the newly added items only? If that is the case you could try the following within the ajax success handler:

    for (var i = 0; i < data[1].length; i++) {
    var elem = $("<div class='jumbotron'><a href=" + data[3][i] + ">" + data[1][i] + "</a><p>" + data[2][i] + "</p></div>").css({"opacity":0});
      $("#output").prepend(elem);                    
      $(elem).fadeIn(1000);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search