Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ Przedszkole _ [JQUERY] Chowanie wszystkich oprócz klikniętego.

Napisany przez: Monter08 18.12.2011, 12:04:05

Witam!
Mam mały problem z animacją w jquery, mianowicie sprawa wygląda tak: mam 4 divy i dwa mają tą samą klasę i chciałbym aby jquery chował wszystkie divy oprócz this, próbowałem coś typu div:not(this), lecz to nie działa. Może ktoś z Was ma inny pomysł? Poniżej wstawiam kod źródłowy.

  1. <http://december.com/html/4/element/head.html>
  2. <http://december.com/html/4/element/meta.html http-equiv="Content-type" content="text/html;charset=UTF-8">
  3. <http://december.com/html/4/element/script.html src="http://code.jquery.com/jquery-1.4.4.js"></http://december.com/html/4/element/script.html>
  4. <http://december.com/html/4/element/script.html type="text/javascript">
  5.  
  6. $(document).ready(
  7. function()
  8. {
  9.  
  10. $('div:not(.all)').toggle(
  11. function()
  12. {
  13. alert($(this).attr("id"));
  14. $(this).animate({
  15. height: "500",
  16. width: "500"
  17. }, 500);
  18. $('div').animate({
  19. height: 'toggle'
  20. }, 1000)
  21. },
  22. function()
  23. {
  24. $(this).animate({
  25. height: "200",
  26. width: "200"
  27. }, 500);
  28. });
  29.  
  30. });
  31. </http://december.com/html/4/element/script.html>
  32. <http://december.com/html/4/element/style.html>
  33. div.all
  34. {
  35. margin: 0 auto;
  36. width:400px;
  37. }
  38. div.one
  39. {
  40. background:red;
  41. height:200px;
  42. width:200px;
  43. float:left;
  44. }
  45.  
  46. div.two
  47. {
  48. background:green;
  49. height:200px;
  50. width:200px;
  51. float:right;
  52. }
  53. </http://december.com/html/4/element/style.html>
  54. </http://december.com/html/4/element/head.html>
  55. <http://december.com/html/4/element/body.html>
  56. <http://december.com/html/4/element/div.html class="all">
  57. <http://december.com/html/4/element/div.html class="one" id="1">1</http://december.com/html/4/element/div.html>
  58. <http://december.com/html/4/element/div.html class="two" id="2">2</http://december.com/html/4/element/div.html>
  59. <http://december.com/html/4/element/div.html class="one" id="3">3</http://december.com/html/4/element/div.html>
  60. <http://december.com/html/4/element/div.html class="two" id="4">4</http://december.com/html/4/element/div.html>
  61. </http://december.com/html/4/element/div.html>

Z góry dziękuje i pozdrawiam.

UPS, chyba pomyliłem działy, proszę o przeniesienie i przepraszam smile.gif

Napisany przez: Shili 18.12.2011, 13:21:46

  1. $("div").hide();
  2. $(this).show();

Napisany przez: Monter08 18.12.2011, 13:35:09

Nie wiem dlaczego, ale chowa mi wszystkie divy ; /

Napisany przez: Shili 18.12.2011, 14:42:51

Który div to this?

Na razie chowa wszystkie, ponieważ podany przez mnie kod był kodem poglądowym. Mniej więcej jak się takie rzeczy robi smile.gif
Trzeba go dostosować do Twojej specyfiki, tzn. zapewne schować wszystkie divy w div.all, jak zgaduję.

http://jsfiddle.net/XNseK/

Oczywiście zamiast .hide() i .show() można dopisać jakiekolwiek inne funkcje, np. Twoje animate smile.gif

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)