JQuery FadeIn és FadeOut

qiz2ik · 2010. Júl. 23. (P), 07.00

Egy olyan problémám lenne, ami már régóta foglalkoztat. A probléma a következő: A jquery segítségével ajaxal szeretnék felépíteni tartalmat. A szerverről jsonnal küldöm át a dolgokat és a kliens oldalon rakjuk fel a megfelelő helyre. Mielőtt elmenne egy ajax kérés kiteszek egy képet, hogy tölt és amikor az új tartalmat megjelenítem ezt eltűntetem. A probléma ott kezdődik, hogy a két eltüntetését fadeingel akarom megoldani, viszon hiába csinálom értelemszerűen,hogy $('#szoveg').fadeOut('slow',functon() {$('kep').fadeIn('slow')}); és az ajax kérésben fordítva, az első keresésékor jól működik utána viszont a képe folyamatosan kinn fog maradni. A debugolás során kiderült, hogy a másodszori lefutása először az ajaxos hívodik meg ismét :S és csak utánna egy első. Foggalmam sincs miért, de sima show és hide esetén működik a dolog.
Remélem érthetően írtam le a problémát:)

Az ötleteket elöre is köszönöm:P

■

HTML, CSS, JavaScript, Ajax

csirip

Nem igazán értem

Kevlar · 2010. Júl. 23. (P), 10.54

Lehet érthetően írtad le, de én nem értem. :)
A legjobb, ha tudsz mutatni egy példát, vagy legalább teljesebb kódot.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

hmm..

ironwill · 2010. Júl. 23. (P), 14.06

Talán mer nem ugyan arra az elemre hivatkozik mindkét esetben?
Vagy ez csak a példakód miatt van?

$('#szoveg').fadeOut('slow',functon() { //#szoveg??
$('kep').fadeIn('slow'); //kep??
});

$('#szoveg').fadeOut('slow',functon() {    //#szoveg??
  $('kep').fadeIn('slow');                 //kep??
});

A hozzászóláshoz regisztráció és belépés szükséges
új téma

na még egyszer:)

qiz2ik · 2010. Júl. 24. (Szo), 17.06

A formot magát nem akarom kiadni mivel egy kereskedelni oldal részét képezi. de a lényeg a következő. Egy gond segítségével kersünk, melyenek során egy ajaxos kérést küldünk el a szervernek és a válasz adatok alapján felépítjük a táblázatot. Viszont ehhez idő kell amíg a böngészőben lefut és ezért kellene a képet kitenni. A jquery része kb ez:

$('#search_button').click(function() {
$('#szoveg').fadeOut('slow',function() { //Eltüntetjük az előző keresés eredményét
$('#kep').fadeIn('slow'); //Miután végzett, behozzuk a képet
});
...
...
...
$.ajax({
url: '...',
data: 'post',
dataType: 'json',
success: function (data) {
$('#kep').fadeOut('slow',function() {
$('#szoveg').fadeIn('slow');
});
};
});
});


$('#search_button').click(function() {
     $('#szoveg').fadeOut('slow',function() {   //Eltüntetjük az előző keresés eredményét
          $('#kep').fadeIn('slow'); //Miután végzett, behozzuk a képet
     });
...
...
...
$.ajax({
   url: '...',
   data: 'post',
   dataType: 'json',
   success: function (data) {
      $('#kep').fadeOut('slow',function() {
         $('#szoveg').fadeIn('slow');
      });
   };
});
});

Ez lenne. Ez első futásnál jó, viszont a többi keresés esetén már a kép valamiért nem tűnik el és fenn marad az oldalon.

Update: Időközben megoldottam úgy, hogy az elején nem fadeelem, hanem csak simán a display tulajdonságát, none-ra állítom a szövegnek, de így elveszik az animáció, szal továbbra is várom az ötleteket:)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés