Databases
StackOverflow2013
Postsdbo
POappend html to fade in using fadeIn()
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POappend html to fade in using fadeIn()
    text
    copied!<p>I cant get my <code>&lt;li&gt;</code> element that is appended to <code>$('ul#posts')</code> to fade in.</p> <p>Things which I have tried.</p> <ol> <li><p>Setting the <code>display:none</code> of <code>&lt;li&gt;</code> before fading it in. The html that is appended is not viewable after the request. That means that fadeIn() didnt work.</p></li> <li><p><code>$(wall_post).appendTo('ul#posts').fadeIn("slow");</code> also doesnt seem to work.</p></li> </ol> <p><strong>Code:</strong></p> <pre><code>var wall_post = '&lt;li&gt; &lt;img src="image/avatar.jpg" class="avatar"&gt;&lt;div class="status"&gt;&lt;h2&gt;&lt;a href="#" target="_blank"&gt;disran&lt;/a&gt;&lt;/h2&gt;&lt;p class="message"&gt;' + textarea_content + '&lt;/p&gt; ' + image_html + '&lt;div class="data"&gt;&lt;p class="name"&gt;&lt;a href="' + siteurl + '" target="_blank"&gt;' + sitetitle + '&lt;/a&gt;&lt;/p&gt;&lt;p class="caption"&gt;' + siteurl + '&lt;/p&gt;&lt;p class="description"&gt;' + sitedesc + '&lt;/p&gt;&lt;/div&gt;&lt;/div&gt; &lt;/div&gt;&lt;p class="likes"&gt;5 hours ago · 100 Likes &lt;/p&gt;&lt;/li&gt;'; var message_wall = $('#message_wall').attr('value'); $.ajax({ type: "GET", url: "insert.php", data: "message_wall=" + wall_post, success: function () { //$('ul#posts').append(wall_post).fadeIn('slow'); //$(wall_post).appendTo('ul#posts').fadeIn("slow"); $('ul#posts').append(wall_post).fadeIn('slow'); } }); </code></pre> <p><strong>wall_post HTML structure</strong></p> <pre><code>&lt;li&gt; &lt;img src="image/avatar.jpg" class="avatar"&gt; &lt;div class="status"&gt; &lt;h2&gt;&lt;a href="#" target="_blank"&gt;disran&lt;/a&gt;&lt;/h2&gt; &lt;p class="message"&gt;[.. textarea_content ..]&lt;/p&gt; [.. image_html ..] &lt;div class="data"&gt; &lt;p class="name"&gt; &lt;a href="[.. siteurl ..]" target="_blank"&gt;[.. sitetitle ..]&lt;/a&gt; &lt;/p&gt; &lt;p class="caption"&gt;[.. siteurl ..]&lt;/p&gt; &lt;p class="description"&gt;[.. sitedesc ..]&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;p class="likes"&gt;5 hours ago 100 Likes&lt;/p&gt; &lt;/li&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload