Forum PHP.pl > [jQuery] zmiana podświetlenia bg komórki tabeli

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [jQuery] zmiana podświetlenia bg komórki tabeli

shpaque

4.03.2014, 12:08:34

Witam serdecznie, chciałbym żeby po najechaniu myszką zmienił mi się bacground w danej komórce tabeli. Mam coś takiego ale nie działa (rozumiem, że ma być wywołane PO td komórki?):

[XML] pobierz, plaintext 
<script type="text/javascript">
$(document).ready(function()
   {
      $(this).hover(function()
         {
            $(this).stop().animate({"background-color": #CCCCCC}, 100);
         },
      function()
         {
            $(this).stop().animate({"background-color": transparent}, 20000);
         });
});
</script>
[XML] pobierz, plaintext

markuz

4.03.2014, 12:12:08

Zamiast $(this) musisz przypisać konkretny element np. $('td') albo id $('#id_td').

shpaque

4.03.2014, 12:28:10

mam tak i nie działa:

[HTML] pobierz, plaintext 
<table id="actuals">
         <tr>
            <td id="wb_uid0"><span id="wb_uid1">
 
               </span>
               <span id="wb_uid2">
 
               </span><div><span id="wb_uid3"> </span></div>
            </td>
<script>
$(document).ready(function()
   {
      $('#wb_uid0').hover(function()
         {
            $('#wb_uid0').stop().animate({"background-color": #CCCCCC}, 100);
         },
      function()
         {
            $('#wb_uid0').stop().animate({"background-color": transparent}, 20000);
         });
});
</script></tr>
[HTML] pobierz, plaintext

Turson

4.03.2014, 12:34:21

Zajrzyj do konsoli. Biblioteka jquery podpięta?

markuz

4.03.2014, 12:36:31

#CCCCCC i transparent też warto umieścić w "".

shpaque

4.03.2014, 12:46:51

biblioteka podpięta, dałem w "" i dalej nic

nospor

4.03.2014, 12:49:18

A mi dziala

Kod

$(document).ready(function()

   {

      $('#wb_uid0').hover(function()

         {

            $('#wb_uid0').css({"background-color": "#CCCCCC"});

         },

      function()

         {

            $('#wb_uid0').css({"background-color": "transparent"});

         });

});

O wstawce w dokumentacji nie wspominajac
http://api.jquery.com/animate/

Cytat

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used).

No ale po co zagladac do konsoli js oraz dokumentacji...

shpaque

4.03.2014, 12:49:47

aaa bo dałeś .css a ja miałem .animate

bo mi jeszcze chodzi o opóźnienie

nospor

4.03.2014, 12:52:19

Odnosnie opoznienia tez masz napisane w poscie powyzej

shpaque

4.03.2014, 13:01:43

co się nie da? Wszystko się da, o proszę (i działą):

[HTML] pobierz, plaintext 
<script type="text/javascript">
$(document).ready(function()
   {
      $('#wb_uid0').hover(function()
         {
            $('#wb_uid0').css({"background-color": "#FFD700"});
            $('#wb_uid0').css({"-webkit-transition": "background-color 500ms linear 0ms"});
            $('#wb_uid0').css({"-moz-transition": "background-color 500ms linear 0ms"});
            $('#wb_uid0').css({"-ms-transition": "background-color 500ms linear 0ms"});
            $('#wb_uid0').css({"transition": "background-color 500ms linear 0ms"});
 
            $('#wb_uid2').css({"color": "#00143C"});
            $('#wb_uid2').css({"-webkit-transition": "color 500ms linear 0ms"});
            $('#wb_uid2').css({"-moz-transition": "color 500ms linear 0ms"});
            $('#wb_uid2').css({"-ms-transition": "color 500ms linear 0ms"});
            $('#wb_uid2').css({"transition": "color 500ms linear 0ms"});
         },
      function()
         {
            $('#wb_uid0').css({"background-color": "transparent"}, 20000);
            $('#wb_uid2').css({"color": "#808080"}, 100);
         });
});
</script>
[HTML] pobierz, plaintext

nospor

4.03.2014, 13:03:28

Ja mowilem ze przy pomocy animate sie nie da.... czytanie ze zrozumieniem tez sie klania. Tak wiec 3 rzeczy do poprawki w sumie
1) Konsola js
2) Dokumentacja
3) Czytanie ze zrozumieniem

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.