slideDown / slideUp werkt niet goed!
social.js:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function(){
$(".twitter").hide(0);
$(".facebook").hide(0);
$("img.twitterknop").mouseover(function(){
$(".twitter").show("slow").slideDown("slow");
});
$("img.twitterknop").mouseout(function(){
$(".twitter").slideUp("slow").show("slow");
});
$("img.facebookknop").mouseenter(function(){
$(".facebook").show("slow").slideDown("slow");
});
$("img.facebookknop").mouseleave(function(){
$(".facebook").slideUp("slow").show("slow");
});
});
$(".twitter").hide(0);
$(".facebook").hide(0);
$("img.twitterknop").mouseover(function(){
$(".twitter").show("slow").slideDown("slow");
});
$("img.twitterknop").mouseout(function(){
$(".twitter").slideUp("slow").show("slow");
});
$("img.facebookknop").mouseenter(function(){
$(".facebook").show("slow").slideDown("slow");
});
$("img.facebookknop").mouseleave(function(){
$(".facebook").slideUp("slow").show("slow");
});
});
style.css:
Code (php)
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
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
img.twitterknop{
position: fixed;
left: 2%;
top: 250px;
width: 310px;
height: 50px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.twitter{
position: fixed;
top: 295px;
left: 2%;
width: 310px;
min-height: 605px;
}
img.facebookknop{
position: fixed;
right: 2%;
top: 250px;
width: 310px;
height: 50px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.facebook{
position: fixed;
top: 300px;
right: 2%;
width: 310px;
min-height: 600px;
}
position: fixed;
left: 2%;
top: 250px;
width: 310px;
height: 50px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.twitter{
position: fixed;
top: 295px;
left: 2%;
width: 310px;
min-height: 605px;
}
img.facebookknop{
position: fixed;
right: 2%;
top: 250px;
width: 310px;
height: 50px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.facebook{
position: fixed;
top: 300px;
right: 2%;
width: 310px;
min-height: 600px;
}
Gewijzigd op 26/03/2014 15:35:34 door Mathieu Posthumus
En vervolgens .slideLeft gebruiken. Koffie nodig?
Snelle Jaap op 26/03/2014 14:43:42:
Heb je jQuery wel ingeladen?
Ja hij is ingeladen. Anders zou die helemaal niks doen:P
Toevoeging op 26/03/2014 15:36:40:
Michael - op 26/03/2014 14:52:16:
>>> behulp van slideDown/slideUp gedaan alleen nu komt ie van de zeikant zijkant.
En vervolgens .slideLeft gebruiken. Koffie nodig?
En vervolgens .slideLeft gebruiken. Koffie nodig?
Dat was omdat ik dingen ging proberen.. Ik heb het weer even aangepast. Maar nou weet ik het probleem nog niet:S
Gewijzigd op 26/03/2014 15:38:12 door Mathieu Posthumus
Even wat praktische tips:
Als je met enkele elementen werkt, dwz je hebt met één div met de class "tweeter" gebruik dan een id.
Gebruik geen .hide() in de document.ready() als je iets in eerste instantie wilt verbergen, maar zet 'm in de css op display:none, dit voorkomt een flits effect als de pagina geladen wordt.
Toevoeging op 26/03/2014 20:48:42:
Maar nu doet de slide het niet!
Maar daar heb je weer een andere code staan dan in je eerste post. En die fiddle werkt gewoon hoor.
Daarnaast is al vaker gezegd dat je je moet verdiepen in functies en niet gewoon gebruiken.
SlideUp en Show zijn inprincipe het zelfde. De één geeft 'm direct weer en de ander met een animatie. Je kunt deze dus nooit samen gebruiken.