Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.87/15: Рейтинг темы: голосов - 15, средняя оценка - 4.87
 Аватар для dimoncheg
10 / 10 / 4
Регистрация: 18.10.2012
Сообщений: 224

Плавное появление div

05.07.2015, 06:16. Показов 2970. Ответов 6
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Использую динамическую подгрузку страниц c помощью Ajax. Правда контент подгружается резко. Как можно сделать, чтобы он плавно появлялся? Заранее спасибо.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
var default_content="";
 
$(document).ready(function(){
    
    checkURL();
    $('ul li a').click(function (e){
 
            checkURL(this.hash);
 
    });
    
    //filling in the default content
    default_content = $('#pageContent').html();
    
    
    setInterval("checkURL()",250);
    
});
 
var lasturl="";
 
function checkURL(hash)
{
    if(!hash) hash=window.location.hash;
    
    if(hash != lasturl)
    {
        lasturl=hash;
        
        // FIX - if we've used the history buttons to return to the homepage,
        // fill the pageContent with the default_content
        
        if(hash=="")
        $('#pageContent').html(default_content);
        
        else
        loadPage(hash);
    }
}
 
 
function loadPage(url)
{
    url=url.replace('#page','');
    
    $('#loading').css('visibility','visible');
    
    $.ajax({
        type: "POST",
        url: "load_page.php",
        data: 'page='+url,
        dataType: "html",
        success: function(msg){
            
            if(parseInt(msg)!=0)
            {
                $('#pageContent').html(msg);
                $('#loading').css('visibility','hidden');
            }
        }
        
    });
 
}
HTML5
1
2
<div id="pageContent">
   </div>
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
05.07.2015, 06:16
Ответы с готовыми решениями:

Плавное появление
Есть следующий спойлер: /* Спойлер */ .details summary { position: relative; background: #ededed; display:inline-block; ...

Плавное появление блоков
Привет, нужно чтобы блоки понемногу вылезали, а не сразу появлялись мне нужно как на этом сайте http://elektrosila.altop.ru (только...

Плавное появление и исчезновение
Всем привет. Хотела, чтобы при наведении на кнопку выпадающий список плавно появлялся, а если увести курсор, то плавно исчезал...Написала...

6
 Аватар для Web-ulyanov
55 / 54 / 24
Регистрация: 07.10.2013
Сообщений: 200
05.07.2015, 11:10
JavaScript
1
2
3
4
var ajaxContent = $('<div id="ajax-content">');
$('#pageContent').append(ajaxContent);
$(ajaxContent).html(msg).fadeIn(400);
$('#loading').css('visibility','hidden');
CSS
1
2
3
#ajax-content {
 display: none;
}
0
 Аватар для dimoncheg
10 / 10 / 4
Регистрация: 18.10.2012
Сообщений: 224
05.07.2015, 12:03  [ТС]
Web-ulyanov, не получается. Джаваскрипт вставил в конец кода моего джаваскрипта, создал div с id ajax-content и поместил в него <div id="pageContent"> </div>. Не рабора, просто нет ничего.
0
 Аватар для Web-ulyanov
55 / 54 / 24
Регистрация: 07.10.2013
Сообщений: 200
05.07.2015, 12:10
dimoncheg,
Не надо ничего создавать, просто попробуйте заменить
JavaScript
1
2
$('#pageContent').html(msg);
$('#loading').css('visibility','hidden');
на код, что я кинул выше
1
 Аватар для dimoncheg
10 / 10 / 4
Регистрация: 18.10.2012
Сообщений: 224
05.07.2015, 12:22  [ТС]
Web-ulyanov, спасибо, заработало практически) появляется плавно, но есть проблема. Несколько страниц и когда я в меню переключаюсь между ними, то старый текст с прошлой остается, а текст со страницы на которую я перешел появляется ниже.. И вот так контент копится...
0
 Аватар для Web-ulyanov
55 / 54 / 24
Регистрация: 07.10.2013
Сообщений: 200
05.07.2015, 12:34
Лучший ответ Сообщение было отмечено dimoncheg как решение

Решение

Можно попробовать if в начало добавить и удалять блок с ajax контентом если он уже есть

JavaScript
1
2
3
4
5
6
7
if($('#ajax-content'))
 $('#ajax-content').remove();
 
var ajaxContent = $('<div id="ajax-content">');
$('#pageContent').append(ajaxContent);
$(ajaxContent).html(msg).fadeIn(400);
$('#loading').css('visibility','hidden');
1
 Аватар для dimoncheg
10 / 10 / 4
Регистрация: 18.10.2012
Сообщений: 224
05.07.2015, 12:38  [ТС]
Web-ulyanov, большое спасибо, все работает, очень помогли
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
05.07.2015, 12:38
Помогаю со студенческими работами здесь

Плавное появление уведомления
Сделал так: &lt;script type=&quot;text/javascript&quot;&gt; $(document).ready(function(){ $('#tab').hide(); $(&quot;#tab&quot;).slideDown(700); ...

Плавное появление блока
Не понимаю как сделать плавное появление блока если на нем виси display:flex. Т.е в обычном случае ставишь none, вешаешь событие и он...

Плавное появление/исчезновение текста
Добрый вечер. Помогите, плз, сделать такой эффект. Когда поле ввода получает фокус, где-то рядом появляется подсказка. Когда фокус...

Плавное появление элемента снизу
Есть блоки. .mouse { width:200px; height:100px; background:red; margin:20px; padding-top:250px; }

Плавное появление скрытого блока
Добрый день, имеется следующий HTML код: &lt;div class=&quot;last_news_img&quot;&gt; &lt;img src=&quot;images/news2.jpg&quot; height=&quot;225px&quot;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Новые блоги и статьи
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru