Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript] Efekt Fade w menu
Forum PHP.pl > Forum > Przedszkole
neotorrent
17.02.2012, 22:19:29
Witam
Mam mały problem z Efektem fadeIn mianowicie
To moja stronka:
Link
Jak widać po najechaniu na Home lub Style zmieniają się napisy na głównym pasku.
Chciałbym by po najechaniu jeden się wygaszał a drugi pojawiał wiem że da się to zrobić fadeIn i fadeOut
Próbuje próbuje czytam kombinuje i nic mądrego mi nie wyszło.
Czy ktoś pokaże, dopisze do aktualnego kodu jak to zrobić?
Wrzucam potrzebne fragmenty kodu:
[HTML] pobierz, plaintext 
  1. <!-- BEGIN Ikony -->
  2.     	<div id="ikonytop">
  3.         <img src="img/ikony/iconatop_home.png" / onMouseOver="MM_showHideLayers('button1','','show','button2','','hide','button3','','hide','button4','','hide')">
  4.         <img src="img/ikony/iconatop_style.png" / onMouseOver="MM_showHideLayers('button1','','hide','button2','','show','button3','','hide','button4','','hide')">
  5.         <img src="img/ikony/iconatop_hosting.png" />
  6.         <img src="img/ikony/iconatop_platnosci.png" />
  7.         <img src="img/ikony/iconatop_kontakt.png" />
  8.         </div>
  9.     <!-- END Ikony -->
  10.     <!-- BEGIN Pasek -->
  11.     	<div id="paseksrodek">
  12.         	<div id="srodekxleft">
  13.        			 <img src="img/pasekorange/pasek_lewoplus.png" />
  14.        		</div> 
  15.         	<div id="srodekx">
  16.             	<div id="srodekxnapisy">
  17.                 	<div id="button1">
  18.             	<img src="img/pasekorange/napisypasek_home.png" />
  19.                 <img src="img/pasekorange/napisypasek_platnosci.png" />
  20.                 <img src="img/pasekorange/napisypasek_forum.png" />
  21.                 <img src="img/pasekorange/napisypasek_partnerzy.png" />
  22.                 <img src="img/pasekorange/napisypasek_kontakt.png" />
  23.                 	</div>
  24.                     <div id="button2">
  25.                 <img src="img/pasekorange/napisypasek_webspell.png" />
  26.                 <img src="img/pasekorange/napisypasek_przemo.png" />
  27.                 <img src="img/pasekorange/napisypasek_joomla.png" />
  28.                 	</div>
[HTML] pobierz, plaintext


zmieniarka.js
[HTML] pobierz, plaintext 
  1. function MM_findObj(n, d) { //v4.01
  2. var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  3. d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  4. if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  5. for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  6. if(!x && d.getElementById) x=d.getElementById(n); return x;
  7. }
  8.  
  9. function MM_showHideLayers() { //v6.0
  10. var i,p,v,obj,args=MM_showHideLayers.arguments;
  11. for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
  12. if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
  13. obj.visibility=v; }
  14. }
[HTML] pobierz, plaintext


CSS
[HTML] pobierz, plaintext 
  1. /* Zmieniarka CSSy */
  2. #button1{
  3. 	visibility: show;
  4. }
  5. #button2{
  6. 	visibility: hidden;
  7. 	margin-top: -18px;
  8. }
[HTML] pobierz, plaintext


Z góry dziękuje , myślę że mi pomożecie ;D
Wiem że rozwiązanie jakie tu zastosowałem nie jest wyszukane przyjmę każda działającą propozycje smile.gif
Kamyk24
18.02.2012, 13:35:00
W sumie też mam problem podobnej natury ;/ Przyłączam się do prośby może coś mi się przyda z tego.
neotorrent
22.02.2012, 14:37:51
Siemka to znowu ja, nie będę zakładał nowego tematu bo ciągle walczę z tym samym tongue.gif

Zrobiłem coś takiego
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Dokument bez tytułu</title>
  6. <script src="http://code.jquery.com/jquery-latest.js"></script>
  7. <style type="text/css">
  8. <!--
  9. #button1 {
  10. 	display:none;
  11. }
  12. #button2 {
  13. 	display:none;
  14. }
  15. #button3 {
  16. 	display:none;
  17. }
  18. #button4 {
  19. 	display:none;
  20. }
  21. #button5 {
  22. 	display:none;
  23. }
  24. -->
  25. </style>
  26. </head>
  27. <body>
  28.  
  29. <div id="przycisk1">Zakładka numer 1</div>
  30. <div id="przycisk2">Zakładka numer 2</div>
  31. <div id="przycisk3">Zakładka numer 3</div>
  32. <div id="przycisk4">Zakładka numer 4</div>
  33. <div id="przycisk5">Zakładka numer 5</div>
  34. <div id="button1">To jest tekst numer 1 bla bla bla</div>
  35. <div id="button2">To jest tekst numer 2 bla bla bla</div>
  36. <div id="button3">To jest tekst numer 3 bla bla bla</div>
  37. <div id="button4">To jest tekst numer 4 bla bla bla</div>
  38. <div id="button5">To jest tekst numer 5 bla bla bla</div>
  39.  
  40. <script>
  41.  
  42. $("div").filter( document.getElementById("przycisk1") ).mouseover(function() {
  43. 	$('#button2').fadeOut('fast', function () {
  44. 	$('#button3').fadeOut('fast', function () {
  45. 	$('#button4').fadeOut('fast', function () {
  46. 	$('#button5').fadeOut('fast', function () {
  47. 	$('#button1').fadeIn('slow');
  48. 	});
  49. 	});
  50. 	});
  51. 	});
  52. });
  53.  
  54. $("div").filter( document.getElementById("przycisk2") ).mouseover(function() {
  55. 	$('#button1').fadeOut('fast', function () {
  56. 	$('#button3').fadeOut('fast', function () {
  57. 	$('#button4').fadeOut('fast', function () {
  58. 	$('#button5').fadeOut('fast', function () {
  59. 	$('#button2').fadeIn('slow');
  60. 	});
  61. 	});
  62. 	});
  63. 	});
  64. });
  65. $("div").filter( document.getElementById("przycisk3") ).mouseover(function() {
  66. 	$('#button1').fadeOut('fast', function () {
  67. 	$('#button2').fadeOut('fast', function () {
  68. 	$('#button4').fadeOut('fast', function () {
  69. 	$('#button5').fadeOut('fast', function () {
  70. 	$('#button3').fadeIn('slow');
  71. 	});
  72. 	});
  73. 	});
  74. 	});
  75. });
  76. $("div").filter( document.getElementById("przycisk4") ).mouseover(function() {
  77. 	$('#button1').fadeOut('fast', function () {
  78. 	$('#button2').fadeOut('fast', function () {
  79. 	$('#button3').fadeOut('fast', function () {
  80. 	$('#button5').fadeOut('fast', function () {
  81. 	$('#button4').fadeIn('slow');
  82. 	});
  83. 	});
  84. 	});
  85. 	});
  86. });
  87. $("div").filter( document.getElementById("przycisk5") ).mouseover(function() {
  88. 	$('#button1').fadeOut('fast', function () {
  89. 	$('#button2').fadeOut('fast', function () {
  90. 	$('#button3').fadeOut('fast', function () {
  91. 	$('#button4').fadeOut('fast', function () {
  92. 	$('#button5').fadeIn('slow');
  93. 	});
  94. 	});
  95. 	});
  96. 	});
  97. });
  98.  
  99.  
  100. </script>
  101. </body>
  102. </html>
[HTML] pobierz, plaintext


No i wszystko ładnie pięknie dopóki nie zacznę szybko przesuwać po przyciskach, wtedy napisy się dublują i efekt można zobaczyć Tutaj: Link
1. Pierwsze pytanie jak pozbyć się tego efektu ?
2. Co złego jest w Tym zapisie
[HTML] pobierz, plaintext 
  1. <script>
  2.  
  3. $("div").filter( document.getElementById("przycisk1") ).mouseover(function() {
  4. 	$('#button2', '#button3', '#button4', '#button5').fadeOut('fast');
  5. 	$('#button1').fadeIn('slow');
  6. });
  7.  
  8. $("div").filter( document.getElementById("przycisk2") ).mouseover(function() {
  9. 	$('#button1', '#button3', '#button4', '#button5').fadeOut('fast');
  10. 	$('#button2').fadeIn('slow');
  11. });
  12. $("div").filter( document.getElementById("przycisk3") ).mouseover(function() {
  13. 	$('#button1', '#button2', '#button4', '#button5').fadeOut('fast');
  14. 	$('#button3').fadeIn('slow');
  15. });
  16. $("div").filter( document.getElementById("przycisk4") ).mouseover(function() {
  17. 	$('#button1', '#button2', '#button3', '#button5').fadeOut('fast');
  18. 	$('#button4').fadeIn('slow');
  19. });
  20. $("div").filter( document.getElementById("przycisk5") ).mouseover(function() {
  21. 	$('#button1', '#button2', '#button3', '#button4').fadeOut('fast');
  22. 	$('#button5').fadeIn('slow');
  23. });
  24.  
  25.  
  26. </script>
[HTML] pobierz, plaintext

Bo on u mnie nie działa ;(

Dzięki z góry smile.gif
Kostek.88
22.02.2012, 16:01:28
http://jsfiddle.net/kostek/kGWFB/ - looknij tu, ew. zamien hide() na fadeOut... o cos takiego Ci chodzilo?

EDIT: ew. krotsza wersja: http://jsfiddle.net/kostek/kGWFB/2/

Co do zapisu, to wydaje mi sie, ze :

[HTML] pobierz, plaintext 
  1.  
  2. $('#button5').fadeOut('fast', function () {
  3. 	$('#button2').fadeIn('slow');
  4. });
  5.  
[HTML] pobierz, plaintext


jesli fadeout zostanie zakonczony, wykonaj fadeIn innego div-a. Jesli w miedzyczasie wywolasz inny fadeout, to efekt ten podmienia sie i w rezultacie ten div nie znika, bo efekt sie nie zakonczy nigdy... tak na szybko napisalem to, wiec wybaczcie bledy.
neotorrent
22.02.2012, 19:34:28
Hmm daje pomógł bo troszkę lepiej działa, ale jak tak sie bardzo szybko przejedzie to i tak sie dubluje ;/ kurcze no też tak domyślałem się ze jedna warstwa nie zdąży się schować a już następna jest. Co to jeszcze można by zaradzić ?
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.