jQuery: Funktionen nacheinander ausführen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • 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":

    Quellcode

    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:

    Quellcode

    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5. <title>Testdemo - Website</title>
    6. <link type="text/css" href="stylesheet.css" />
    7. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    9. <script language="javascript" type="text/javascript">
    10. $(function()
    11. {
    12. var status_home;
    13. var status_download;
    14. var status_forum;
    16. status_home = false;
    17. status_download = false;
    18. status_forum = false;
    23. $('#home').click(function()
    24. {
    25. if(status_home == false)
    26. {
    27. $('#window_content').slideUp(500);
    28. $('#frame').attr('src', 'home.html');
    29. $('#window_content').slideDown(500);
    30. status_home = true;
    31. status_download = false;
    32. status_forum = false;
    33. }
    34. });
    36. $('#download').click(function()
    37. {
    38. if(status_download == false)
    39. {
    40. $('#window_content').slideUp(500);
    41. $('#frame').attr('src', 'download.html');
    42. $('#window_content').slideDown(500);
    43. status_home = false;
    44. status_download = true;
    45. status_forum = false;
    46. }
    47. });
    49. $('#forum').click(function()
    50. {
    51. if(status_forum == false)
    52. {
    53. $('#window_content').slideUp(500);
    54. $('#frame').attr('src', 'forum.html');
    55. $('#window_content').slideDown(500);
    56. status_home = false;
    57. status_download = false;
    58. status_forum = true;
    59. }
    60. });
    63. });
    65. </script>
    66. </head>
    68. <style type="text/css">
    69. <!--
    70. body {
    71. background-color: #000000;
    72. margin: 0;
    73. padding: 0;
    74. width: 100%;
    75. height: 100%;
    76. }
    78. #gesamt {
    79. margin: 0 auto;
    80. }
    82. #inhalt {
    83. height: 600px;
    84. width: 600px;
    85. margin: 25px auto;
    86. }
    90. .menu_top {
    91. width: 200px;
    92. height: 34px;
    93. background-image: url(menu.png);
    94. text-align: center;
    95. vertical-align: middle;
    96. background-color: black;
    97. float: left;
    98. }
    100. .menu_bottom {
    101. width: 200px;
    102. height: 34px;
    103. background-image: url(menu_2.png);
    104. text-align: center;
    105. vertical-align: middle;
    106. background-color: black;
    107. float: left;
    108. }
    110. #window_content {
    111. width: 596px;
    112. height: 431px;
    114. border: 2px white solid;
    115. }
    117. .header {
    118. width: 600px;
    119. height: 34px;
    120. }
    123. -->
    124. </style>
    126. <body>
    128. <div id="#gesamt">
    129. <div id="inhalt">
    130. <div class="header">
    131. <div class="menu_top" id="home">Home</div>
    132. <div class="menu_top" id="download">Download</div>
    133. <div class="menu_top" id="forum">Forum</div>
    134. </div>
    135. <div id="window_content">
    136. <iframe src="home.html" width="100%" height="100%" scrolling="no" frameborder="0" id="frame"></iframe>
    137. </div>
    138. <div class="header">
    139. <div class="menu_bottom">asd</div>
    140. <div class="menu_bottom">asd</div>
    141. <div class="menu_bottom">asd</div>
    142. </div>
    143. </div>
    144. </div>
    146. </body>
    147. </html>
    Alles anzeigen

  • 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 ;)

    Quellcode

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