Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Применение библиотек > Jquery: Плавное скрытие, загрузка и показ слоя

Автор: Gold Dragon 17.3.2011, 11:19

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

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

Нужна помощь 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;
        });
    }

Автор: z-END 17.3.2011, 11:43

естественно резко, ты же содержание слоя меняешь.
простой способ (если дизайн позволяет)

Код


<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;
        });
    }

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

Автор: Gold Dragon 17.3.2011, 11:48

Цитата(z-END @ 17.3.2011, 12:43

)

естественно резко, ты же содержание слоя меняешь.

я убрал всё то, чем экспериментировал, чтобы не запутать smile

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

Автор: Gold Dragon 17.3.2011, 13:09

вроде что-то получилось и всё работает... 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

Автор: z-END 17.3.2011, 13:29

мне кажется ты перемудрил.

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

Автор: Gold Dragon 17.3.2011, 13:39

так у меня картина загрузки и где выводится текст это один и тот же Див

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

Автор: нуп 17.3.2011, 14:41

Код


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

Разве так не прокатит?

Автор: Gold Dragon 17.3.2011, 15:23

нуп, ты имеешь в виду "#contents" заменить на this?

Автор: z-END 17.3.2011, 15:28

Цитата(Gold Dragon @ 17.3.2011, 14:39

)

так у меня картина загрузки и где выводится текст это один и тот же Див

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

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

Код


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

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

Код


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

Автор: Gold Dragon 17.3.2011, 15:32

z-END, ага, спасибо, поменял...

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

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

Автор: z-END 17.3.2011, 15:49

добавь в функцию объект:

Код


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

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

Код


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

Автор: Gold Dragon 17.3.2011, 15:52

z-END, не понял, а что это даст? Просто холостой вызов события?

Автор: z-END 17.3.2011, 16:07

1. blur - уберет фокус со ссылки.
2. return false в onclick - не разрешает браузеру переход по ссылке.

Автор: Gold Dragon 17.3.2011, 16:09

так функция и так возвращает false

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

фокус исчез