[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Красивое оформление появления индикатора AJAX
Shkiper
Всем qQ! laugh.gif ! Сделал скрипт аякса он работает все норм biggrin.gif . Во время выполнения запроса в отдельном ДИВе выводиться анимация загрузки а по окончании убирается. Так вот эта картинка просто появляется и исчезает не красиво смотрится. Как мне сделать чтоб например плавно появилось и плавно ушла анимация?????



Спустя 16 минут, 19 секунд (24.04.2012 - 12:51) Игорь_Vasinsky написал(а):
jquery animate()

Спустя 10 минут, 47 секунд (24.04.2012 - 13:01) alexbel2404 написал(а):
fadeTo и fadeOut

Спустя 5 часов, 1 минута, 3 секунды (24.04.2012 - 18:03) Shkiper написал(а):
Игорь_Vasinsky от JQuery у меня мягко говоря сыпь вокруг анального отверстия высыпает.
alexbel2404 а можно про эти функции по подробнее. Я что-то подобное у Попова слыхал.

Спустя 45 минут, 55 секунд (24.04.2012 - 18:48) redreem написал(а):
Цитата
fadeTo и fadeOut


Цитата
а можно про эти функции по подробнее. Я что-то подобное у Попова слыхал.


это тоже "сыпь" smile.gif

Свернутый текст
только не fadeTo, а fadeIn

Спустя 7 минут, 2 секунды (24.04.2012 - 18:55) Shkiper написал(а):
redreem только как мне эту "сыпь" использовать dry.gif

Спустя 14 минут, 51 секунда (24.04.2012 - 19:10) redreem написал(а):
$('#idIndicator').fadeIn(300);
$('#idIndicator').fadeOut(300);

$('#idIndicator').css({opacity:0,display:'block'}).animate({opacity:1},300);
$('#idIndicator').animate({opacity:0},300, function() {$('#idIndicator').css({display:'none'});});


как-то так...

Спустя 1 час, 56 минут, 30 секунд (24.04.2012 - 21:07) alexbel2404 написал(а):
Цитата (redreem @ 24.04.2012 - 20:48)
Цитата
fadeTo и fadeOut


Цитата
а можно про эти функции по подробнее. Я что-то подобное у Попова слыхал.


это тоже "сыпь" smile.gif

Свернутый текст
только не fadeTo, а fadeIn

перепутал немного)

Спустя 8 часов, 22 минуты, 3 секунды (25.04.2012 - 05:29) Shkiper написал(а):
redreem я нашел путь по короче, но со встраиванием опять проблемы. Вот код АЯКСА:
	function SendPOST()
{
var data = document.getElementById('text').value;
ajaxSendPOST('/system/adminpanel/preview.php','q='+encodeURI(data), SendCallback);
}


function SendCallback(xmlh,query)
{
if(xmlh.status == 200)
{
var ans = query;
alert(ans);
var sel = document.getElementById('result_preview');
sel.innerHTML = "";
}else{alert("Ошибка");}



}


function ajaxSendPOST(xmlpage,data,callback)
{

var xmlh = null;
if(window.XMLHttpRequest)
xmlh = new XMLHttpRequest();
else
try

{ xmlh = new ActiveXObject('Msxml2.XMLHTTP'); }
catch(ex) { xmlh = new ActiveXObject('Microsoft.XMLHTTP'); }

if(xmlh)
{
xmlh.open('post', xmlpage, true);
xmlh.onreadystatechange = function(x)

{

if(xmlh.readyState==4)
{
callback(xmlh,xmlh.responseText);
}


}



xmlh.setRequestHeader("Accept-Charset", "windows-1251");
xmlh.setRequestHeader("Accept-Language","ru, en");
xmlh.setRequestHeader("Connection", "close");
xmlh.setRequestHeader("Content-length", data.length);
xmlh.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlh.send(data);
var sel = document.getElementById('result_preview');
sel.innerHTML = "<img style='display: none' src='/system/skins/images/ajax.gif' />";
$("#ajax").click(function () {
$("#result_preview").show("slow");
});


}
}

Ну а вот HTML:
   <label>
<script
src="/system/skins/js/preview.ajax.js" type="text/javascript"></script>
<script
src="http://code.jquery.com/jquery-latest.js"></script>
<div
onClick="SendPOST();" id="ajax">Нажми меня</div>
<div
id="result_preview"></div>

</label>

Я делал что при запросе аякс у меня в #result_preview показывалась анимация, но я хотел добавить эффект и анимация вообще не работает помогите pliceeee

Спустя 3 часа, 33 минуты, 36 секунд (25.04.2012 - 09:02) redreem написал(а):
я тебя не понимаю:

Цитата
от JQuery у меня мягко говоря сыпь вокруг анального отверстия высыпает


при этом подключаешь jQuery, при этом делаешь свой XMLHttpRequest !?!?!

какой смысл??? jQuery.ajax превосходно справляется с задачей и кода будет в 5 раз меньше и кроссбраузерно...

Спустя 6 минут, 43 секунды (25.04.2012 - 09:09) Shkiper написал(а):
redreem а можно хороший мануал по аяксу JQ о всеми тонкостями,???

Спустя 5 минут, 33 секунды (25.04.2012 - 09:15) ADiel написал(а):

Спустя 9 минут, 37 секунд (25.04.2012 - 09:24) redreem написал(а):

Спустя 40 минут, 12 секунд (25.04.2012 - 10:05) Shkiper написал(а):
redreem blink.gif

Спустя 5 часов, 58 минут, 9 секунд (25.04.2012 - 16:03) Shkiper написал(а):
Нашел аякс на JQ но там неполадки. Как отправить пост запрос???? Сначала $.ajax а потом $.post или просто $.post или $.ajax&&&&&??

Спустя 1 час, 40 минут, 16 секунд (25.04.2012 - 17:43) redreem написал(а):
или post или ajax. $.ajax - самая общая функция. а $.post, $.get, $getJSON - это просто оболочки, которые упрощают запрос. а по сути обращаются к $.ajax

Спустя 2 часа, 35 минут, 9 секунд (25.04.2012 - 20:18) alexbel2404 написал(а):
что-то одно используй

Спустя 14 часов, 20 минут, 49 секунд (26.04.2012 - 10:39) Shkiper написал(а):
я так понял что $.ajax можно делать любой запрос а $.post или $.get 1 запросом biggrin.gif

Спустя 2 часа, 11 минут, 30 секунд (26.04.2012 - 12:50) Shkiper написал(а):
Пожалуйста продемонстрируйте мне код плавного появления анимации при запросе AJAX(JQ или чистый JS не имеет знаечения)

Спустя 38 минут, 12 секунд (26.04.2012 - 13:29) redreem написал(а):
$('#loadIndicator').animate({opacity:1}, 500);

$.ajax({

url: url,
cache: false,
async: true,
dataType: 'html',
type: 'post',
data: data,

complete:function(data){

$('#loadIndicator').animate({opacity:0}, 500);

d = data.responseText;

alert(d);

}

}
);

Спустя 1 час, 50 минут, 18 секунд (26.04.2012 - 15:19) Shkiper написал(а):
redreem приведи пожалуйста полный пример а то у меня не получается :help me:

Спустя 43 минуты, 4 секунды (26.04.2012 - 16:02) redreem написал(а):
ну какой еще полный, расписать тебе и серверную и клиентскую части чтоли? давай 300WMR, сделаю 100% работоспособный микропример c ajax запросом, получением ответа и индикатором загрузки... я не понимаю что именно тебе непонятно.

Спустя 15 минут, 42 секунды (26.04.2012 - 16:18) Shkiper написал(а):
redreem
ладно проехали. А за что отвечает opacity??? и какие у него параметры???*?

Спустя 11 минут, 38 секунд (26.04.2012 - 16:29) redreem написал(а):
opacity - это css свойство - прозрачность. от 0 до 1.

Спустя 40 минут, 20 секунд (26.04.2012 - 17:10) Shkiper написал(а):
redreem
нашел модальное окно http://ruseller.com/lessons.php?rub=29&id=283 как мне его вывести не по нажатию по кнопке а результатом аякс.

Спустя 1 минута, 28 секунд (26.04.2012 - 17:11) redreem написал(а):
complete:function(data){

//вызово модального окна

}

Спустя 26 минут, 2 секунды (26.04.2012 - 17:37) Shkiper написал(а):
redreem фуф а я чето тупанул и дамал там что-то с rel="#rel="#overlay" надо делать. Да и это окошко срабатывает при нажатии а как сделать просто вывод без нажатия???
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.