Jquery slide div
[EDIT: Heb het al een deel, moet het enkel nog tot alleen het vraagteken maken, maar dat krijg ik niet!]
Mensen,
op deze pagina
www.goo.gl/prrRRT
zien jullie een div (links onder met dat vraagteken en het plaatje) die eigenlijk als volgt zou moeten zijn:
je ziet enkel het vraagteken, en wanneer je er overheen hovert met je muis, schuift hij uit naar volledige div (zoals hij nu staat dus) Maar ik heb met de jquery zitten spelen maar kom er niet precies uit. zie hier mijn jquery
Heeft iemand een idee?
Mensen,
op deze pagina
www.goo.gl/prrRRT
zien jullie een div (links onder met dat vraagteken en het plaatje) die eigenlijk als volgt zou moeten zijn:
je ziet enkel het vraagteken, en wanneer je er overheen hovert met je muis, schuift hij uit naar volledige div (zoals hij nu staat dus) Maar ik heb met de jquery zitten spelen maar kom er niet precies uit. zie hier mijn jquery
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<script>
$('.vraagteken_container').hover(function() {
$('.vraagteken_container').hide('slide', {direction: 'right'}, 1000);
$('.vraagteken_container').show('slide', {direction: 'left'}, 1000);
});
</script>
$('.vraagteken_container').hover(function() {
$('.vraagteken_container').hide('slide', {direction: 'right'}, 1000);
$('.vraagteken_container').show('slide', {direction: 'left'}, 1000);
});
</script>
Heeft iemand een idee?
Gewijzigd op 27/01/2014 22:54:46 door Hans -
wat je nu doet is de hele container laten verdwijnen en weer tevoorschijn halen als je over diezelfde container heen hovert. Het effect dat daardoor ontstaat is dat je het element waarover je hovert laat verdwijnen zodat je er weer niet over hovert waardoor het weer te voorschijn komt en je er weer overheen hovert enz enz
Je moet alijd twee vragen stellen:
1. op welke gebeurtenis (event) van welk element wil ik een actie toevoegen?
2. wat is de actie en op welk element of elementen heeft de actie effect?
Bij jou zou het antwoord kunnen zijn:
1. bij een hover over .vraagteken
2. show() .vraagteken_plaatje
Vergeet niet om het volgende in je css te zetten:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div class="vraagteken_container">
<div class="vraagteken_plaatje">
<img src="style/images/vraagteken_plaatje.png" />
</div>
<div class="vraagteken">
?
</div>
</div>
<div class="vraagteken_plaatje">
<img src="style/images/vraagteken_plaatje.png" />
</div>
<div class="vraagteken">
?
</div>
</div>
Je moet alijd twee vragen stellen:
1. op welke gebeurtenis (event) van welk element wil ik een actie toevoegen?
2. wat is de actie en op welk element of elementen heeft de actie effect?
Bij jou zou het antwoord kunnen zijn:
1. bij een hover over .vraagteken
2. show() .vraagteken_plaatje
Code (php)
1
2
3
4
5
2
3
4
5
<script>
$('.vraagteken').hover(function() {
$('.vraagteken_plaatje').show('slide', {direction: 'left'}, 1000);
});
</script>
$('.vraagteken').hover(function() {
$('.vraagteken_plaatje').show('slide', {direction: 'left'}, 1000);
});
</script>
Vergeet niet om het volgende in je css te zetten:
Gewijzigd op 28/01/2014 01:15:17 door Frank Nietbelangrijk
Frank, ik heb dat nu toegepast, dit begint inderdaad al meer erop te lijken. Enkel heb ik nog wat dingen waar ik mee zit waar ik niet uitkomt.
Bijvoorbeeld dat vraagteken_container 300px blijft, maar die moet wanneer alleen het vraagteken te zien is, kleiner zijn, en als ik eroverheen ga moet hij vloeiend groter worden.
Bijvoorbeeld dat vraagteken_container 300px blijft, maar die moet wanneer alleen het vraagteken te zien is, kleiner zijn, en als ik eroverheen ga moet hij vloeiend groter worden.
De container geen 300px meegeven, maar deze met jQuery meesturen icm animate.
Dat werkt inderdaad wel, maar dan ben ik nog niet helemaal tevreden, want als je kijkt zie je dat het plaatje wel slide maar de div zelf niet. die komt in een keer BAM binnen.
Dan moet je het plaatje ook een animate geven.
Ik heb nu dit
Maar krijg nog steeds het niet goed
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<script>
$('.vraagteken').hover(function() {
$('.vraagteken_plaatje').show('slide', {direction: 'left'}, 1000);
$("div.vraagteken_plaatje").animate({width:215},"slow");
$("div.vraagteken_container").animate({width:280},"slow");
});
</script>
$('.vraagteken').hover(function() {
$('.vraagteken_plaatje').show('slide', {direction: 'left'}, 1000);
$("div.vraagteken_plaatje").animate({width:215},"slow");
$("div.vraagteken_container").animate({width:280},"slow");
});
</script>
Maar krijg nog steeds het niet goed
Wat is er niet goed aan? Ik weet niet wat jouw wensen precies zijn.
Daarbij heb je nu 2x een actie op je vraagteken_plaatje. En moet je plaatje nog verdwijnen bij het verlaten van de link?
Daarbij heb je nu 2x een actie op je vraagteken_plaatje. En moet je plaatje nog verdwijnen bij het verlaten van de link?
Oke ik zal even precies uitleggen wat ik wil.
Je moet alleen het vraagteken zien, als je erover heen hovert, klapt de hele div vloeiend uit. In die div zit dan ook dat plaatje, maar die klapt doormiddel van die div mee uit.
Mijn gedachte ging er eigenlijk naar dat ik dan bijvoorbeeld die div kan vullen met het plaatje en het vraagteken, en dan op een of andere manier die div onder de blauwe achtergrond kan laten verdwijnen, en als iiemand dan over het vraagteken gaat dat die div er dan uitkomt. Als je met je muis eraf gaat gaat hij weer terug. Ik dacht dat dat wel makkelijk was.
Je moet alleen het vraagteken zien, als je erover heen hovert, klapt de hele div vloeiend uit. In die div zit dan ook dat plaatje, maar die klapt doormiddel van die div mee uit.
Mijn gedachte ging er eigenlijk naar dat ik dan bijvoorbeeld die div kan vullen met het plaatje en het vraagteken, en dan op een of andere manier die div onder de blauwe achtergrond kan laten verdwijnen, en als iiemand dan over het vraagteken gaat dat die div er dan uitkomt. Als je met je muis eraf gaat gaat hij weer terug. Ik dacht dat dat wel makkelijk was.




