Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [jQuery] zmiana podświetlenia bg komórki tabeli
shpaque
post
Post #1





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


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?):

  1. <script type="text/javascript">
  2. $(document).ready(function()
  3. {
  4. $(this).hover(function()
  5. {
  6. $(this).stop().animate({"background-color": #CCCCCC}, 100);
  7. },
  8. function()
  9. {
  10. $(this).stop().animate({"background-color": transparent}, 20000);
  11. });
  12. });
  13. </script>
Go to the top of the page
+Quote Post
markuz
post
Post #2





Grupa: Zarejestrowani
Postów: 1 240
Pomógł: 278
Dołączył: 11.03.2008

Ostrzeżenie: (0%)
-----


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

Ten post edytował markuz 4.03.2014, 12:12:59
Go to the top of the page
+Quote Post
shpaque
post
Post #3





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


mam tak i nie działa:

  1. <table id="actuals">
  2. <tr>
  3. <td id="wb_uid0"><span id="wb_uid1">
  4.  
  5. </span>
  6. <span id="wb_uid2">
  7.  
  8. </span><div><span id="wb_uid3"> </span></div>
  9. </td>
  10. $(document).ready(function()
  11. {
  12. $('#wb_uid0').hover(function()
  13. {
  14. $('#wb_uid0').stop().animate({"background-color": #CCCCCC}, 100);
  15. },
  16. function()
  17. {
  18. $('#wb_uid0').stop().animate({"background-color": transparent}, 20000);
  19. });
  20. });
  21. </script></tr>
Go to the top of the page
+Quote Post
Turson
post
Post #4





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----


Zajrzyj do konsoli. Biblioteka jquery podpięta?

Ten post edytował Turson 4.03.2014, 12:35:20
Go to the top of the page
+Quote Post
markuz
post
Post #5





Grupa: Zarejestrowani
Postów: 1 240
Pomógł: 278
Dołączył: 11.03.2008

Ostrzeżenie: (0%)
-----


#CCCCCC i transparent też warto umieścić w "".
Go to the top of the page
+Quote Post
shpaque
post
Post #6





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


biblioteka podpięta, dałem w "" i dalej nic
Go to the top of the page
+Quote Post
nospor
post
Post #7





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004




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...
Go to the top of the page
+Quote Post
shpaque
post
Post #8





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


aaa bo dałeś .css a ja miałem .animate (IMG:style_emoticons/default/smile.gif) bo mi jeszcze chodzi o opóźnienie

Ten post edytował shpaque 4.03.2014, 12:50:33
Go to the top of the page
+Quote Post
nospor
post
Post #9





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004




Odnosnie opoznienia tez masz napisane w poscie powyzej
Go to the top of the page
+Quote Post
shpaque
post
Post #10





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


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

  1. <script type="text/javascript">
  2. $(document).ready(function()
  3. {
  4. $('#wb_uid0').hover(function()
  5. {
  6. $('#wb_uid0').css({"background-color": "#FFD700"});
  7. $('#wb_uid0').css({"-webkit-transition": "background-color 500ms linear 0ms"});
  8. $('#wb_uid0').css({"-moz-transition": "background-color 500ms linear 0ms"});
  9. $('#wb_uid0').css({"-ms-transition": "background-color 500ms linear 0ms"});
  10. $('#wb_uid0').css({"transition": "background-color 500ms linear 0ms"});
  11.  
  12. $('#wb_uid2').css({"color": "#00143C"});
  13. $('#wb_uid2').css({"-webkit-transition": "color 500ms linear 0ms"});
  14. $('#wb_uid2').css({"-moz-transition": "color 500ms linear 0ms"});
  15. $('#wb_uid2').css({"-ms-transition": "color 500ms linear 0ms"});
  16. $('#wb_uid2').css({"transition": "color 500ms linear 0ms"});
  17. },
  18. function()
  19. {
  20. $('#wb_uid0').css({"background-color": "transparent"}, 20000);
  21. $('#wb_uid2').css({"color": "#808080"}, 100);
  22. });
  23. });
Go to the top of the page
+Quote Post
nospor
post
Post #11





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004




(IMG:style_emoticons/default/facepalmxd.gif)
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
(IMG:style_emoticons/default/tongue.gif)
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 22.08.2025 - 22:20