Как бы я изменил приведенную ниже страницу и код, чтобы, когда мои «новости» P затухали, содержимое под ним ... плавно скользило вверх вместо прыжка.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("a").click(function () { $("p").fadeOut(2000); return false; }); }); </script> <style> p { position:relative; width:400px; height:90px; background-color:#0099CC; } </style> </head> <body> <p> this is a news box. it will fade out when the x is clicked that is all. (<a href="#">x</a>) </p> <br /> does this shift up after fade out.<br /> </body> </html>
Вероятно, он выскочит, когда элемент исчезнет.
Вы можете попробовать уменьшить его до 0,001, чтобы он был практически невидим, а затем анимировать высоту p до 0 с помощью функции обратного вызова.
Проверьте принятый ответ на этот похожий вопрос: Как связать события в jQuery
Также этот ответ (на другой вопрос) fadeOut затем slideUp , который, кажется, делает именно то, что вы хотите.
Попробуйте медленно изменить height на p, imho, это будет лучшим решением вашей проблемы.
height
p