Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]jQuery- łączenie efektów
Forum PHP.pl > Forum > Przedszkole
Oczko21
Witam,
Mam taki mały problem. Przerabiam sobie teraz przykłady z jQuery i natrafilem na przeszkodę. Mianowicie:
  1. $(function() {
  2. $("ul#separator span").css("opacity","0");
  3. // on mouse over
  4. $("ul#separator span").hover(function () {
  5. $(this).stop().animate({
  6. opacity: 1
  7. }, "slow");
  8. },
  9. // on mouse out
  10. function () {
  11. $(this).stop().animate({
  12. opacity: 0
  13. }, "slow");
  14. });
  15. });


Działa ładnie, efekt jak zapewne domyślacie się jest to przenikanie tła.
Pomyślałem sobie że fajnie byłoby gdyby to wszystko się jeszcze wysuwało i tutaj pojawia się problem:
Przerobiłem to na takie coś:
  1. $(function() {
  2. $("ul#separator span").css("opacity","0");
  3. // on mouse over
  4. $("ul#separator span").hover(function () {
  5. $(this).stop().animate({
  6. opacity: 1
  7. }, "slow"),
  8. $("ul#separator span").animate({left: "0px"}, 1000 );
  9. },
  10. // on mouse out
  11. function () {
  12. $(this).stop().animate({
  13. opacity: 0
  14. }, "slow"),
  15. $("ul#separator span").animate({left: "-250px"}, 1000 );
  16. });
  17. });

I można powiedzieć że działa, ale dla wszystkich span'ów. Chciałbym żeby to działało tak jak z tym pierwszym efektem, dla pojedyńczego span'a.
Próbowałem robić z $(this), zagnieżdzać jeszcze jedną funkcję function(){ $(ul#separator span).animate({left: "-250px"}, 1000 ); }, ale brak porządanego efektu.
Ktoś mógłby mnie nakierować na właściwy tor rozumowania tego?
Niktoś
Może dlatego ,że brakuje cudzysłowów w
$(ul#separator span).animate({left: "0px"}, 1000 );
może powinno być:
$("ul#separator span").animate({left: "0px"}, 1000 );
Oczko21
Wybacz, niedokładnie przepisałem.
Oczywiście w orginale były cudzysłowy i nic to nie zmieniło.
kamil4u
Kod
    $(function() {
    $("ul#separator span").css("opacity","0");
    // on mouse over
    $("ul#separator span").hover(function () {
    $(this).stop().animate({
    opacity: 1
    }, "slow"),
    $(this).animate({left: "0px"}, 1000 );
    },
    // on mouse out
    function () {
    $(this).stop().animate({
    opacity: 0
    }, "slow"),
    $(this).animate({left: "-250px"}, 1000 );
    });
    });
?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.