Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Jquery: Плавное скрытие, загрузка и показ слоя 
:(
    Опции темы
Gold Dragon
Дата 17.3.2011, 11:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71
Мне нужно при нажатии на ссылку
- плавно поменять то что есть на картинку загрузки
- загрузить данные с сервера
- плавно поменять картинку загрузки на загруженные данные

всю голову сломал... У меня слой резко появляется, а уж потом все эффекты. Я понимаю что делаю что-то не так.. но что.  

Нужна помощь smile

вот чистый код, чтоб было от чего отталкиваться
Код

    function pageLicense(){
        $("#contents").html("<div align='center'><img src='images/tpl/ajax-loader.gif' /></div>");
        $.get("ajax.php?page=license", function(data){
            $("#contents").html(data);
            return false;
        });
    }



--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
z-END
Дата 17.3.2011, 11:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прафесар™
****


Профиль
Группа: Комодератор
Сообщений: 3014
Регистрация: 13.3.2003
Где: Венья, Пиетари

Репутация: 3
Всего: 102
естественно резко, ты же содержание слоя меняешь.
простой способ (если дизайн позволяет)

Код

<div id="contents" style="background:url(images/tpl/ajax-loader.gif) center no-repeat">
 <div id='innerContent' style="background:#fff'>
 </div>
</div>


ну и собсно JS такого вида:
Код

function pageLicense(){
        $("#innerContent").animate({opacity:0},500);
        $.get("ajax.php?page=license", function(data){
            $("#innerContent").stop();
            $("#innerContent").css('opacity',0);
            $("#innerContent")..html(data);
            $("#innerContent")..animate({opacity:1},500);
            return false;
        });
    }


(на коленке писано, но суть думаю ясна)


--------------------
Каждый чилавек пасвоему праф...а памоему НЕТ! 
PM WWW ICQ   Вверх
Gold Dragon
Дата 17.3.2011, 11:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71
Цитата(z-END @  17.3.2011,  12:43 Найти цитируемый пост)
естественно резко, ты же содержание слоя меняешь.
я убрал всё то, чем экспериментировал, чтобы не запутать smile

сейчас проверю твоё творение... Но я вообще-то копал в сторону fade...



--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
Gold Dragon
Дата 17.3.2011, 13:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71
вроде что-то получилось и всё работает... smile 
Код

<div id="fon6"></div>
<div id="contents"></div>

Код

function pageSelection(page, name, url_site){
    $("#fon6").text(name);
    $("#contents").animate({opacity:0},500, function(){
        $("#contents").css('opacity',0);
        $("#contents").html("<div align='center'><img src='"+url_site+"/images/tpl/ajax-loader.gif' /></div>");
    });
    $("#contents").animate({opacity:1},500);
    $.get("ajax.php?page="+page, function(data){
        $("#contents").animate({opacity:0},500, function(){
            $("#contents").css('opacity',0);
            $("#contents").html(data);
        });
        $("#contents").animate({opacity:1},500);
        return false;
    });
}

если есть какие-либо замечания, готов выслушать smile

Это сообщение отредактировал(а) Gold Dragon - 17.3.2011, 13:10


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
z-END
Дата 17.3.2011, 13:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прафесар™
****


Профиль
Группа: Комодератор
Сообщений: 3014
Регистрация: 13.3.2003
Где: Венья, Пиетари

Репутация: 3
Всего: 102
мне кажется ты перемудрил.

суть простая:
есть див у которого фоном установлена картинка аякс-лоад. в этот див вложен другой див у которого фон - белый. 
при выполнении запроса - внутренний див становится полностью прозрачным, тем самым создается эффект "появления картинки аякс-лоад"
при получении данных - во все еще абсолютно прозрачный вложенный див помещается новый контент, после чего его этот див плавно становится непрозрачным. 



--------------------
Каждый чилавек пасвоему праф...а памоему НЕТ! 
PM WWW ICQ   Вверх
Gold Dragon
Дата 17.3.2011, 13:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71
так у меня картина загрузки и где выводится текст это один и тот же Див

Добавлено через 1 минуту и 38 секунд
у меня сейчас плавно меняется Див на картинку, а потом плавно меняется на то что загрузилось


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
нуп
Дата 17.3.2011, 14:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ботокодер
**


Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 8
Всего: 33
Код

$("#contents").animate({opacity:0},500, function(){
            $(this).css('opacity',0);
            $(this).html(data);
        });

Разве так не прокатит? 
PM MAIL   Вверх
Gold Dragon
Дата 17.3.2011, 15:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71
нуп, ты имеешь в виду "#contents" заменить на this?



Это сообщение отредактировал(а) Gold Dragon - 17.3.2011, 15:28


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
z-END
Дата 17.3.2011, 15:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прафесар™
****


Профиль
Группа: Комодератор
Сообщений: 3014
Регистрация: 13.3.2003
Где: Венья, Пиетари

Репутация: 3
Всего: 102
Цитата(Gold Dragon @  17.3.2011,  14:39 Найти цитируемый пост)
так у меня картина загрузки и где выводится текст это один и тот же Див

не работает - исправь. работает - нетрож! ))))

единственное что
вот этот кусок 
Код

        $("#contents").animate({opacity:1},500);
        return false;
    });
}

замени на этот:
Код

        $("#contents").animate({opacity:1},500);
    });
   return false;
}



--------------------
Каждый чилавек пасвоему праф...а памоему НЕТ! 
PM WWW ICQ   Вверх
Gold Dragon
Дата 17.3.2011, 15:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71
z-END, ага, спасибо, поменял...

Ну код у меня работает, спасибо за помощь всем ;)
можно считать что вопрос решён

Добавлено через 4 минуты и 8 секунд
чуть в догонку... функцию я инициализирую путём нажатия на ссылку.. но у ссылки остаётся фокус, т.е. по Enter можно её запустить.. Как убрать фокус грамотнее?


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
z-END
Дата 17.3.2011, 15:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прафесар™
****


Профиль
Группа: Комодератор
Сообщений: 3014
Регистрация: 13.3.2003
Где: Венья, Пиетари

Репутация: 3
Всего: 102
добавь в функцию объект:
Код

function pageSelection(obj, page, name, url_site){
$(obj).blur();
...

ну и на ссылке соотв:
Код

<a href="/" onclick="return pageSelection(this,......



--------------------
Каждый чилавек пасвоему праф...а памоему НЕТ! 
PM WWW ICQ   Вверх
Gold Dragon
Дата 17.3.2011, 15:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71
z-END, не понял, а что это даст? Просто холостой вызов события?


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
z-END
Дата 17.3.2011, 16:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прафесар™
****


Профиль
Группа: Комодератор
Сообщений: 3014
Регистрация: 13.3.2003
Где: Венья, Пиетари

Репутация: 3
Всего: 102
1. blur - уберет фокус со ссылки.
2. return false  в onclick - не разрешает браузеру переход по ссылке.


--------------------
Каждый чилавек пасвоему праф...а памоему НЕТ! 
PM WWW ICQ   Вверх
Gold Dragon
Дата 17.3.2011, 16:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71
так функция и так возвращает false

// я сделал проще... применил в тэгу А с именем класса smile
фокус исчез 



--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Применение библиотек | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0838 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.