我遇到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');
}
});
})
})
&#13;
.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;
}
&#13;
<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>
&#13;
答案 0 :(得分:0)
fadeIn
和类.hide
来隐藏新元素。对每个新元素执行fadeIn效果。
$(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>
答案 1 :(得分:0)
您是否希望仅将效果应用于新添加的项目?如果是这种情况,您可以在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);
}