Question

我想在.append和.remove。

时运行CSS动画

一些示例代码：

$(".search-form").submit(function() {
    $("#box").remove();
    event.preventDefault();
    var searchText = $('#input-1').val();
    $('#input-1').val("");
    var searchURL = "https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrsearch=" + searchText + "&gsrlimit=15&prop=extracts&exsentences=3&exintro=&explaintext&exlimit=max&callback=JSON_CALLBACK";
    console.log(searchURL);
    var wikiResponse = wikiAjax(searchURL);
    wikiResponse.done(function(data) {
          console.log(data);
        $.each(data.query.pages, function(index, value) {
          var wikiResultHTML = '<div class="linkable-div"><a href="https://en.wikipedia.org/?curid=' + value.pageid + '"<div class="container"><article class="search-result row well"><div class="col-xs-12 col-sm-12 col-md-7 excerpet"><h3>' + value.title + '</h3><p>' + value.extract + '</p></div><span class="clearfix borda"></span></article></div></a></div>';
          $(".search-results").append(wikiResultHTML);
        });
        $('.linkable-div').click(function() {
           event.preventDefault();
           var wikiLink = $(this).find('a').attr('href');
           $('.linkable-div').remove();
           showBox();
           $("#iframe").attr('src', wikiLink);
        });

    }).fail(function(err) {
        alert("The call has been rejected");
    });
});

你能帮我吗？

提前致谢。

Answer 1

我认为.linkable-div是应该动画的display:none;。首先 - 向其添加$(".linkable-div").fadeIn();属性。所以它不会以通常的方式显示。

之后，添加动画代码，如下所示：

.remove()

而不是.fadeOut()设置> 20

在追加和删除元素时启动CSS动画

1 个答案: