添加和刪除元素時啓動CSS動畫

-2

我想要在.append和.remove時運行CSS動畫。添加和刪除元素時啓動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"); 
    }); 
});

你能幫助我嗎？

在此先感謝。

來源

2016-04-05 S4rg0n

只是把你的動畫代碼.append'或'.remove'代碼之後'，有什麼問題？ – Tinmar

並在此處提供更多的代碼。你在追加/刪除什麼？ – Tinmar

@Tinmar怎麼樣？我已經添加了一些代碼。謝謝。 – S4rg0n

我認爲這.linkable-div是應該動畫的。首先 - 將display:none;屬性添加到它。所以它不會以通常的方式顯示。

之後，加入動畫代碼，就像這樣：

$(".linkable-div").fadeIn();

而不是.remove()集.fadeOut()

來源

2016-04-05 15:02:46 Tinmar

添加和刪除元素時啓動CSS動畫

回答

相關問題