[HTML][AJAX] Efekt pojawiającego się tekstu Opcje

[-lukasamd-]

Witam,
mam chyba dosyć śmieszny problem - w efekcie kliknięcia na link, poprzez użycie ajaxa wykonywane jest zapytanie do bazy zaś zamiast linku pojawia się napis "Operacja została wykonana".

Taka zamiana po 1-2 sekundach wygląda jednak niezbyt ciekawie, najlepiej gdyby napis zmienił się z np. efektem przenikania.
Jak to osiągnąć w HTML?

[kielich]

zapodaj kod:

[-lukasamd-]

Strona z linkiem (fragment):

[PHP] pobierz, plaintext 
<?php
echo '<div id="info"><a href="'.$_SERVER['REQUEST_URI'].'#" onclick="sendRequest('.$userdata['user_id'].' , '.$data['gra_id'].')">Dodaj grę do ulubionych</a></div>';
?>
[PHP] pobierz, plaintext 

JS:

Kod

var xHRObject = false;
if (window.XMLHttpRequest)
{
  xHRObject = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
  xHRObject = new ActiveXObject("Microsoft.XMLHTTP");
}

function sendRequest(user , gra)
{
  xHRObject.open("GET", "kod.php?user_id=" + user + "&gra_id=" + gra, true);
  xHRObject.onreadystatechange = getData;
  xHRObject.send(null);
}

function getData()
{
  if (xHRObject.readyState == 4 && xHRObject.status == 200)
  {
    var serverText = xHRObject.responseText;
    if(serverText.indexOf('|' != -1))
    {
      element = serverText.split('|');
      document.getElementById(element[0]).innerHTML = element[1];
    }
  }
}

Strona obrabiająca:

[PHP] pobierz, plaintext 
<?php
$user_id = $_REQUEST['user_id'];
$gra_id = $_REQUEST['gra_id'];
$czas = time();
 
mysql_query("INSERT INTO ".DB_ULUBIONE." VALUES ('".$user_id."', '".$gra_id."', '".$czas."')");
echo 'info|Operacja została wykonana!';
?>
[PHP] pobierz, plaintext 

[erix]

Taka zamiana po 1-2 sekundach wygląda jednak niezbyt ciekawie, najlepiej gdyby napis zmienił się z np. efektem przenikania.
Jak to osiągnąć w HTML?

Ściągnij sobie jakiegoś frameworka, bo każda przeglądarka robi inaczej (właściwie, to tylko IE) i się zajedziesz wynajdując koło na nowo.

A np. w jQuery:

Kod

$('#id_warstwy').fadeOut();

i tyle [;

[slightyboy]

Skorzystaj z jakiegoś frameworka JS/AJAX, np. jQuery, mooTools, czy mintAjax (polska biblioteka - więc najpierw zajrzyj tam). Co do samej implementacji sposobu: możesz umieścić warstwę na warstwie (potem fadeować tą górną) albo użyć tylko jednej warstwy i najpierw ją ukryć (fade'm), podmienić zawartość i przy użyciu setTimeout() ponownie pokazać (fade'm).

[-lukasamd-]

No dobra, ale jak tego konkretnie używać? Jak załączyć to wiem, gorzej z innymi rzeczami.
Np chciałbym aby po kliknięciu na napis zniknął. Dałem więc coś takiego:

[HTML] pobierz, plaintext 
<p onclick='fadeOut("slow")'>To ma zniknąć</p>
[HTML] pobierz, plaintext 

No i niestety wg. moich przewidywań nie działa (na 100% źle to dałem, no ale naprawdę nie wiem jak ma być).
jQuery załączone.

[erix]

Bo nie ma prawa działać. [;

jak już, to:

Kod

<p onclick='$(costutrzebawpisac).fadeOut("slow")'>To ma zniknąć</p>

A co trzeba wpisać? Zobacz w dokumentacji, co to jest magiczna funkcja "pieniężna". [;

[Maxik]

@erix: A zwykłe this nie wystarcza?

[erix]

Nie mogłeś cicho siedzieć?

[Maxik]

W sumie mogłem, ale po co?

Reasumując:

[HTML] pobierz, plaintext 
<p onclick='this.fadeOut("slow")'>To ma zniknąć</p>
[HTML] pobierz, plaintext 

[erix]

To też jest źle. Gdybyś działał na Prototype i gdyby miał taką funkcję, to by przeszło, ale jQ działa na nieco innej zasadzie.

Ale nie będę mówił, co - podałem wskazówki wcześniej. [;

[-lukasamd-]

Już jarzę Jak dam $(this) to odwoła się do tego elementu z którego jest wykonywane, jak chcę cos innego to po znaczniku i klasie np.

[HTML] pobierz, plaintext 
<p onclick='$("p.znikanie").fadeOut("slow")'>ZNIKNIE CZY NIE?</p>
<p class="znikanie">To ma zniknąc</p>
[HTML] pobierz, plaintext 

Czyli jak rozumiem, mogę ten i inne efekty z jQuery wrzucać sobie do HTML'a bez znajomości samego mechanizmu (no podawane argumenty to wiadomo)?

[erix]

No jednak załapałeś. [;

Możesz też zamiast selektora podawać this, xpath, inne rzeczy, wszyskto jest opisane i właściwie, to chyba nie ma takiej zmiennej, której nie można "spieniężyć". [;