You are not logged in.

  • Login

jQuery: Funktionen nacheinander ausführen

JaffaCoder

Professional

  • "JaffaCoder" started this thread

Posts: 211

  • Send private message

1

Friday, September 16th 2011, 5:05pm

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

JavaScript Code

 
1
2
3

$('#window_content').slideUp(500);
            $('#frame').attr('src', 'home.html');
            $('#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:

HTML Code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

<!DOCTYPE html>
<html>
 
<head>
    <title>Testdemo - Website</title>
    <link type="text/css" href="stylesheet.css" />
    <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 
    <script language="javascript" type="text/javascript">
    $(function()
    {
        var status_home;
        var status_download;
        var status_forum;
 
        status_home = false;
        status_download = false;
        status_forum = false;
 
 
 
 
        $('#home').click(function()
        {
            if(status_home == false)
            {
            $('#window_content').slideUp(500);
            $('#frame').attr('src', 'home.html');
            $('#window_content').slideDown(500);
            status_home = true;
            status_download = false;
            status_forum = false;
            }
        });
 
        $('#download').click(function()
        {
            if(status_download == false)
            {
            $('#window_content').slideUp(500);
            $('#frame').attr('src', 'download.html');
            $('#window_content').slideDown(500);
            status_home = false;
            status_download = true;
            status_forum = false;
            }
        });
 
        $('#forum').click(function()
        {
            if(status_forum == false)
            {
            $('#window_content').slideUp(500);
            $('#frame').attr('src', 'forum.html');
            $('#window_content').slideDown(500);
            status_home = false;
            status_download = false;
            status_forum = true;
            }
        });
 
 
    });
 
    </script>
</head>
 
<style type="text/css">
<!--
body {
    background-color: #000000;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
 
#gesamt {
    margin: 0 auto;
}
 
#inhalt {
    height: 600px;
    width: 600px;
    margin: 25px auto;
}
 
 
 
.menu_top {
    width: 200px;
    height: 34px;
    background-image: url(menu.png);
    text-align: center;
    vertical-align: middle;
    background-color: black;
    float: left;
}
 
.menu_bottom {
    width: 200px;
    height: 34px;
    background-image: url(menu_2.png);
    text-align: center;
    vertical-align: middle;
    background-color: black;
    float: left;
}
 
#window_content {
    width: 596px;
    height: 431px;
 
    border: 2px white solid;
}
 
.header {
    width: 600px;
    height: 34px;
}
 
 
-->
</style>
 
<body>
 
    <div id="#gesamt">
        <div id="inhalt">
            <div class="header">
                <div class="menu_top" id="home">Home</div>
                <div class="menu_top" id="download">Download</div>
                <div class="menu_top" id="forum">Forum</div>
            </div>
            <div id="window_content">
                <iframe src="home.html" width="100%" height="100%" scrolling="no" frameborder="0" id="frame"></iframe>
            </div>
            <div class="header">
                <div class="menu_bottom">asd</div>
                <div class="menu_bottom">asd</div>
                <div class="menu_bottom">asd</div>
            </div>
        </div>
    </div>
 
</body>
</html>

vince

Master

Posts: 1,104

  • Send private message

2

Friday, September 16th 2011, 5:30pm

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:

Quoted

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

JavaScript Code

 
1
2
3
4

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

JaffaCoder

Professional

  • "JaffaCoder" started this thread

Posts: 211

  • Send private message

3

Friday, September 16th 2011, 5:41pm

Ahh, es funktioniert. Danke :thumbsup:

Similar threads

Tagging

Social bookmarks