login  Naam:   Wachtwoord: 
Registreer je!
 Forum

jQuery animatie alleen op huidige item

Offline Jointjeff - 03/06/2011 10:19
Avatar van JointjeffHTML interesse Goedemorgen iedereen,

Door middel van onderstaand code heb ik animatie gemaakt, dat wanneer men over de class .bg-img gaat, dat .hover omhoog komt. Omdat ik meerdere .bg-img's divs heb gaan de .hover classes allemaal omhoog als terwijl dat alleen bij het item moet zijn wat je moet hoveren.

Plaatscode: 141075

Iemand een idee hoe ik dit kan oplossen?

11 antwoorden

Gesponsorde links
Offline WouterJ - 03/06/2011 11:58
Avatar van WouterJ HTML gevorderde Ik begrijp je niet heel goed. Laat eens je HTML structuur zien. Wat ik denk is dat dat er zo uitziet:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="bg-img">Hover <div class="hover">Dit is onzichtbaar</div></div>
  2. <div class="bg-img">Hover <div class="hover">Dit is onzichtbaar</div></div>

Als dit zo is zul je moeten gaan kijken naar de jQuery functie Children() in combinatie met $(this).
Offline Jointjeff - 27/06/2011 16:57
Avatar van Jointjeff HTML interesse Om met een soort gelijk probleem hier op terug te komen... Het probleem is als volgt:

Ik heb een div, wanneer men deze hovert, moet een andere div een addClass krijgen. Mijn code is zo:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $(function() {
  2. $("a.plus").hover(function() {
  3. 	$('.scribble_plus').addClass("scribble_show").animate({"opacity": "1"}, "slow");
  4. }, 
  5. function () {
  6. 	$('.scribble_plus').removeClass("scribble_show").animate({"opacity": "0"}, "slow");
  7. });});


Nu zijn er meerde a.plus elementen op de pagina, en dus is de animatie op meerdere plaatsen in de pagina te zien. Ik wil dat dit alleen op de huidige hover gebeurd.

Ik kan, voor zover ik weet, op deze manier geen ($this) gebruiken omdat het een andere div is waar ik de addClass aan toevoeg.

Hopende op hulp.
Offline WouterJ - 27/06/2011 18:31
Avatar van WouterJ HTML gevorderde Allereerst heb je geen div, maar een anchor.

Maar om op je vraag terug te komen. Maak gebruik van de selector opties van jQuery, zoals .next() .children() .previous(), enz. Een pagina met al deze functies: http://api.jque...-traversal/

Verder kan je je animatie functie beter schrijven met fadeIn() of fadeOut().
Offline Jointjeff - 28/06/2011 09:51
Avatar van Jointjeff HTML interesse Hallo Waldio,

Het is inderdaad een anchor, sorry.

Ik heb even gekeken naar selector opties, maar welke kan het beste toepassen in deze kwestie? Zou je me ook op weg kunnen helpen met hoe ik dat zou moeten toepassen?

Bedankt voor je antwoord.
Offline WouterJ - 28/06/2011 16:38
Avatar van WouterJ HTML gevorderde Zonder een kleine relevante HTML optie kunnen we niks beginnen. En kijk zelf ook eens rond op die handleiding, lees de uitleg bekijk voorbeelden, enz.
Offline Jointjeff - 29/06/2011 10:09
Avatar van Jointjeff HTML interesse Ik heb een div, met daarin een link (anchor, class=plus). Buiten deze div staat een andere div met de class "scribble_plus". Wanneer men de link hovert moet er een class aan "scribble_plus" worden toevoegd, namelijk "scribble_show".

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="content">
  2. <a href="#" class="plus"></a>
  3. </div>
  4. <div class="scribble_plus">Dit moet getoond worden na het hoveren van a.plus</div>


Ik zal nog even wat proberen dmv van die handleiding, maar stiekem hoop ik dat je me een zetje in de juiste richting wil geven.

Bedankt voor je antwoord ;)
Offline WouterJ - 29/06/2011 15:11 (laatste wijziging 29/06/2011 15:14)
Avatar van WouterJ HTML gevorderde Het is dus de hele tijd dezelfde opbouw? Kijk dan eens naar .next(). Met dezelfde opbouw bedoel ik :
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="content">
  2.   <a href="javascript:void(0)" class="plus"></a>
  3. </div>
  4. <div class="scribble_plus">Dit moet getoond worden</div>
  5. <div class="content">
  6.   <a href="javascript:void(0)" class="plus"></a>
  7. </div>
  8. <div class="scribble_plus">Dit moet getoond worden</div>

Zodra je dit niet hebt zul je de div gewoon telkens een andere class/id moeten meegeven. Met jQuery haal je dit id/class dan op (met .attr()). Vervolgens kijk je naar een div.scribble_plus die ook nog het opgehaalde id/class heeft. Hiervan had ik nog een voorbeeldje staan: http://waldio.110mb.com/js/jQuery/show.html
Offline Jointjeff - 29/06/2011 17:31
Avatar van Jointjeff HTML interesse Bedankt voor je antwoord Waldio! Ik ga eens met dat voorbeeld aan de gang (ben al een heel eind, dus ik denk dat het wel moet lukken).

Bedankt voor je tips. 
Offline Martijn - 29/06/2011 19:05
Avatar van Martijn Crew PHP volgens mij kan de jQuery UI dat soort dingen ff naar googlen en de site checken, als t daar is dat ik het heb gezien, is het veel beter getest en scheelt je een hoop werk
Offline WouterJ - 29/06/2011 22:36
Avatar van WouterJ HTML gevorderde @Martijn, dan ben ik zeer benieuwd welke functie jij bedoeld. Ik heb even gekeken, maar kan er niks over vinden. Ik dacht jQuery UI ook alleen voor wat handige extra animatie's en functies was die er via plugins zijn bijgekomen?
Offline Jointjeff - 30/06/2011 11:36
Avatar van Jointjeff HTML interesse @Waldio, dat dacht ik ook. Gebruik het regelmatig.

In ieder geval wil ik je bedanken voor je hulp, want het is gelukt. 
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.204s