Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] greyscale/desaturation
Forum PHP.pl > Forum > Po stronie przeglądarki
Mrozix
Wpisz tekst ...Hej!

Modyfikując jeden z szablonów wordpressa, napotkałem si na pewien problem odnośnie zmiany jednej z funkcji w plikach .js
Otóż, jak zmienić ten fragment kodu:

  1. //Social Buttons Animation
  2. jQuery('.social_wrap ul li').css({'opacity':'0.4'});
  3. jQuery('.social_wrap ul li ').hover(function(){
  4. jQuery(this).stop().animate({'opacity':'1'}, 300);
  5. }, function(){
  6. jQuery(this).stop().animate({'opacity':'0.4'}, 300);
  7. });


i zmodyfikować go tak aby wyświetlał podobny efekt jak na tej witrynie:
http://webdesignerwall.com/demo/html5-grayscale/

próbowałem tworzyć poprzez plik desaturation.svg lecz nie umiem ustawić efektu płynnego przejścia (rollover) z czarno-białego na kolor..
oczywiście jak by była lepsza opcja, bez użycia pliku .svg był bym wdzięczny.
freemp3
Mógłbyś pokazać trochę kodu html? Jak się domyślam w elemencie LI znajduje się obrazek kolorowy i pod nim obrazek w skali szarości.
Zamiast tego:
Kod
jQuery(this).stop().animate();

powinno być:
Kod
jQuery('img.color', jQuery(this)).stop().animate();
Mrozix
  1. /* <![CDATA[ */
  2. //TRITON JavaScript
  3. jQuery(window).load(function($) {
  4.  
  5. jQuery('#menu-scylla li:first').css({"margin-Left":"0px", "Padding-Left":"0px"})
  6. //JQUERY MASONRY in Archive page
  7. jQuery('.lay1').masonry({ itemSelector: '.post, .page' });
  8. jQuery('.lay1 .post:eq(2), .lay1 .post:eq(5), .lay1 .post:eq(8), .lay1 .post:eq(11), .lay1 .post:eq(14), #midrow .widgets .widget:eq(2)').css({'margin-Right':'0px'});
  9. jQuery('.lay1 .post').slice(-3).css({'border':'none'});
  10.  
  11.  
  12. //MENU Animation
  13. jQuery('#topmenu ul > li').hoverIntent(function(){
  14. jQuery(this).find('.sub-menu:first, ul.children:first').slideDown({ duration: 200});
  15. }, function(){
  16. jQuery(this).find('.sub-menu:first, ul.children:first').slideUp({ duration: 200});
  17. });
  18. jQuery('#topmenu ul li').not('#topmenu ul li ul li').hover(function(){
  19. jQuery(this).addClass('menu_hover');
  20. }, function(){
  21. jQuery(this).removeClass('menu_hover');
  22. });
  23.  
  24. //Layout1 Animations
  25. jQuery('.lay1 .post .imgwrap').css({'opacity':'0.4'});
  26. jQuery('.lay1 .post ').hover(function(){
  27. jQuery(this).find('.imgwrap').stop().animate({'opacity':'1'}, 300);
  28. }, function(){
  29. jQuery(this).find('.imgwrap').stop().animate({'opacity':'0.4'}, 300);
  30. });
  31. jQuery('.lay1 .post .date_meta').css({'right':'-300px'});
  32. jQuery('.lay1 .post .block_comm').css({'left':'-200px'});
  33. jQuery('.lay1 .post ').hover(function(){
  34. jQuery(this).find('.date_meta').stop().animate({'right':'0px'}, 300);
  35. jQuery(this).find('.block_comm').stop().animate({'left':'0px'}, 300);
  36. jQuery(this).find('.read_mor').css({'background':'#ccc'}, 300);
  37. }, function(){
  38. jQuery(this).find('.date_meta').stop().animate({'right':'-300px'}, 300);
  39. jQuery(this).find('.block_comm').stop().animate({'left':'-200px'}, 300);
  40. jQuery(this).find('.read_mor').css({'background':'#dfdfdf'}, 300);
  41. });
  42.  
  43. //Social Buttons Animation
  44. jQuery('.social_wrap ul li').css({'opacity':'0.4'});
  45. jQuery('.social_wrap ul li ').hover(function(){
  46. jQuery(this).stop().animate({'opacity':'1'}, 300);
  47. }, function(){
  48. jQuery(this).stop().animate({'opacity':'0.4'}, 300);
  49. });
  50.  
  51. //Comment FORM
  52. jQuery('h3#reply-title').after('<div class="comm_break" /><div style="clear:both" />');
  53.  
  54. //Shortcode Fix
  55. jQuery(".lgn_tab p:empty").remove();
  56. jQuery('.tabli a:eq(0)').attr('href', '#tab-1');
  57. jQuery('.tabli a:eq(1)').attr('href', '#tab-2');
  58. jQuery('.tabli a:eq(2)').attr('href', '#tab-3');
  59. jQuery('.tabli a:eq(3)').attr('href', '#tab-4');
  60. jQuery('.tabli a:eq(4)').attr('href', '#tab-5');
  61. jQuery('.tabli a:eq(5)').attr('href', '#tab-6');
  62. jQuery('.tabli a:eq(6)').attr('href', '#tab-7');
  63. jQuery('.tabli a:eq(7)').attr('href', '#tab-8');
  64. jQuery('.tabli a:eq(8)').attr('href', '#tab-9');
  65.  
  66.  
  67. jQuery('.lgn_tab div:eq(0)').attr('id', 'tab-1');
  68. jQuery('.lgn_tab div:eq(1)').attr('id', 'tab-2');
  69. jQuery('.lgn_tab div:eq(2)').attr('id', 'tab-3');
  70. jQuery('.lgn_tab div:eq(3)').attr('id', 'tab-4');
  71. jQuery('.lgn_tab div:eq(4)').attr('id', 'tab-5');
  72. jQuery('.lgn_tab div:eq(5)').attr('id', 'tab-6');
  73. jQuery('.lgn_tab div:eq(6)').attr('id', 'tab-7');
  74. jQuery('.lgn_tab div:eq(7)').attr('id', 'tab-8');
  75. jQuery('.lgn_tab div:eq(8)').attr('id', 'tab-9');
  76.  
  77. jQuery(document).ready(function(){
  78. jQuery('.tabs-container .lgn_tab div').hide();
  79. jQuery('.tabs-container .lgn_tab div:first').show();
  80. jQuery('.tabs li:first').addClass('active');
  81. jQuery('.tabs li a').click(function(){
  82. jQuery('.tabs li').removeClass('active');
  83. jQuery(this).parent().addClass('active');
  84. var currentTab = jQuery(this).attr('href');
  85. jQuery('.tabs-container .lgn_tab div').hide();
  86. jQuery(currentTab).fadeIn();
  87. return false;
  88. });
  89. });
  90. //Toggle Shortcode
  91. jQuery('.lgn_toggle_content').hide(); // Hide even though it's already hidden
  92. jQuery('.trigger').click(function() {
  93. jQuery('.lgn_toggle_content').slideToggle("fast"); // First click should toggle to 'show'
  94. return false;
  95. });
  96. jQuery('.lgn_toggle a').toggle(function(){
  97. jQuery(this).addClass('down');
  98. }, function(){
  99. jQuery(this).removeClass('down');
  100. });
  101.  
  102. });
  103.  
  104.  
  105.  
  106.  
  107. /* ]]> */


Cały plik .js

Dokładniej chodzi mi tu o .imgwrap.
Fragment zamieszczony powyżej zamieściłem w pierwszej kolejności gdyż tyczy się tego samego problemu lecz jak widać odnośnie social buttons.
Podstawiałem zamiast opacity -> filter lecz nie umiem dodać efektu przejścia w jQuery.
freemp3
Zmień opacity z 0.4 na 0 i czas z 300 na powiedzmy 2000. W tedy zobaczysz przejście, 0.3 sekundy to troche mało, żeby je zobaczyć.
Mrozix
lecz ten kod daje jedynie efekt transparentności, z 40% na 100%, a tu chodzi o totalna zmianę funkcji na filter:greyscale 100%, płynne przejście z czarno-białych barw na kolor przy najechaniu kursorem
freemp3
Nie wiem czy uda Ci się uzyskać ten efekt tylko przy pomocy CSS. Owszem jest możliwość dodania filtra, ale z tego co wiem działa on poprawnie jedynie w webkit, natomiast w innych silnikach może sprawiać problemy. Chyba najlepszym i najszybszym rozwiązaniem będzie zastosować, tak jak na stronie którą podałeś, dwóch obrazków jeden pod drugim i zmiana widoczności.

Może ktoś inny będzie wiedział czy uda się to zrobić tak jak chcesz.
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.