每次单击按钮时都进行相同的转换

Question

我遇到了 css 转换的问题，只需在第一次单击按钮时执行转换，然后输出不带转换的信息。

每次点击按钮输出新搜索时如何触发相同的转换？

我试图解决它，但只是隐藏数据，而不是重复第一次转换

$(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>

Answer 1

• 您可以使用 jQuery 的内置函数 fadeIn 和类 .hide 来隐藏新元素。

对每个新元素执行淡入淡出效果。

看看这个代码sn-p

$(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>

资源

• .fadeIn()

Answer 2

您是否希望仅将效果应用于新添加的项目？如果是这种情况，您可以在 ajax 成功处理程序中尝试以下操作：

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