jQuery: Funktionen nacheinander ausführen

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • jQuery: Funktionen nacheinander ausführen

    Huhu.

    Ich habe folgende Funktion, die den Link eines iframes ändert. Dieser Frame befindet sich in einer Box, die zuerst "hochgeslidet" wird, der Link geändert wird undd dann wieder "runterslidet":

    Source Code

    1. $('#window_content').slideUp(500);
    2. $('#frame').attr('src', 'home.html');
    3. $('#window_content').slideDown(500);


    Nun ist das Problem, dass ich den neuen iframe schon sehe, wenn die Box hochslidet. Wie bring ich es hin, dass der Link erst geändert wird, wenn die Box komplett geslidet ist?

    Kompletter Code:

    Source Code

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <title>Testdemo - Website</title>
    5. <link type="text/css" href="stylesheet.css" />
    6. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    7. <script language="javascript" type="text/javascript">
    8. $(function()
    9. {
    10. var status_home;
    11. var status_download;
    12. var status_forum;
    13. status_home = false;
    14. status_download = false;
    15. status_forum = false;
    16. $('#home').click(function()
    17. {
    18. if(status_home == false)
    19. {
    20. $('#window_content').slideUp(500);
    21. $('#frame').attr('src', 'home.html');
    22. $('#window_content').slideDown(500);
    23. status_home = true;
    24. status_download = false;
    25. status_forum = false;
    26. }
    27. });
    28. $('#download').click(function()
    29. {
    30. if(status_download == false)
    31. {
    32. $('#window_content').slideUp(500);
    33. $('#frame').attr('src', 'download.html');
    34. $('#window_content').slideDown(500);
    35. status_home = false;
    36. status_download = true;
    37. status_forum = false;
    38. }
    39. });
    40. $('#forum').click(function()
    41. {
    42. if(status_forum == false)
    43. {
    44. $('#window_content').slideUp(500);
    45. $('#frame').attr('src', 'forum.html');
    46. $('#window_content').slideDown(500);
    47. status_home = false;
    48. status_download = false;
    49. status_forum = true;
    50. }
    51. });
    52. });
    53. </script>
    54. </head>
    55. <style type="text/css">
    56. <!--
    57. body {
    58. background-color: #000000;
    59. margin: 0;
    60. padding: 0;
    61. width: 100%;
    62. height: 100%;
    63. }
    64. #gesamt {
    65. margin: 0 auto;
    66. }
    67. #inhalt {
    68. height: 600px;
    69. width: 600px;
    70. margin: 25px auto;
    71. }
    72. .menu_top {
    73. width: 200px;
    74. height: 34px;
    75. background-image: url(menu.png);
    76. text-align: center;
    77. vertical-align: middle;
    78. background-color: black;
    79. float: left;
    80. }
    81. .menu_bottom {
    82. width: 200px;
    83. height: 34px;
    84. background-image: url(menu_2.png);
    85. text-align: center;
    86. vertical-align: middle;
    87. background-color: black;
    88. float: left;
    89. }
    90. #window_content {
    91. width: 596px;
    92. height: 431px;
    93. border: 2px white solid;
    94. }
    95. .header {
    96. width: 600px;
    97. height: 34px;
    98. }
    99. -->
    100. </style>
    101. <body>
    102. <div id="#gesamt">
    103. <div id="inhalt">
    104. <div class="header">
    105. <div class="menu_top" id="home">Home</div>
    106. <div class="menu_top" id="download">Download</div>
    107. <div class="menu_top" id="forum">Forum</div>
    108. </div>
    109. <div id="window_content">
    110. <iframe src="home.html" width="100%" height="100%" scrolling="no" frameborder="0" id="frame"></iframe>
    111. </div>
    112. <div class="header">
    113. <div class="menu_bottom">asd</div>
    114. <div class="menu_bottom">asd</div>
    115. <div class="menu_bottom">asd</div>
    116. </div>
    117. </div>
    118. </div>
    119. </body>
    120. </html>
    Display All
  • Du könntest setTimeout benutzen. Problem ist, das du mit der Timeoutzeit hin und her probieren musst, was nicht so schön ist.

    Wenn du in die jQuery Doku schaust, dann findest du bei slideUp folgende Definition:
    .slideUp( [duration], [callback] )
    durationA string or number determining how long the animation will run.
    callbackA function to call once the animation is complete.


    Ganz easy ... einfach den Callback benutzen ;)

    Source Code

    1. $('#window_content').slideUp(500, function() {
    2. $('#frame').attr('src', 'other.html');
    3. });
    4. $('#window_content').slideDown(500);