kleur van div langzaam laten vervagen na 'hover'

Status
Niet open voor verdere reacties.
V

vinno97

Gebruiker
Lid geworden
18 feb 2011
Berichten
207
hoi
ik wil op mijn site een paar div's plaatsen die nadat je ze hebt aangewezen een andere kleur krijgen en als je de muis eraf haalt de kleur langzaam weggaat(niet meteen) weet iemand hoe ik dit moet doen?
 
Dit kan met een simpele mouseover script waarvan je dan geen image laat veranderen, maar gewoon de gehele div.

Als je de jquery in de pagina zet. Deze is te downloaden op http://jquery.com/
[JS]<script src="jquery-1.4.2.js" type="text/javascript"></script>
[/JS]

Hierna plak je dit script in de header. Dit zegt gewoon heel simpel, dat deze met mouseover transparant moet worden in de tempo: "medium".
[JS]<script type="text/javascript">
$(document).ready(function(){
$(".start").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "medium");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});

});
</script>
[/JS]

Je plakt de css code in je stylesheet zodat ze wel op dezelfde plaats staan.
Code: 
.start {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}

.end {
position: absolute;
left: 0;
top: 0;
}

en je geeft de div het juiste ID!
HTML: 
<div class="start">DIV1</div>
<div class="end">DIV2</div>
 
je script zal vast en zeker goed werken maar mijn div's staan niet in mijn html maar worden gemaakt als de pagina word geladen (het is een html5-webapplicatie met een database). dus ik kan er geen 2 maken met een andere kleur, dat gaat mijn pet te boven en de div's staan niet op een vaste plaats omdat de niuwste posts bovenaan staan.

is er nog een andere manier?
 
Als deze apart worden geladen, kun je ze toch gewoon een ID geven? Daarbij is dit eigenlijk gewoon 1 div. De andere staat eroverheen. Als je gewoon zorgt dat start en end over elkaar staan, zou het toch moeten werken?
 
Als deze apart worden geladen, kun je ze toch gewoon een ID geven? Daarbij is dit eigenlijk gewoon 1 div. De andere staat eroverheen. Als je gewoon zorgt dat start en end over elkaar staan, zou het toch moeten werken?

Wat je anders kan doen:
Code: 
div#id { ...}
div#id:hover { .. }
als je zorgt dat met hover deze div (div#id) een opacity van 0 krijgt, en eronder een div klaar hebt staan, zou het ook nog gewoon kunnen werken zonder javascript.
 
ze hebben ook allemaal een id maar ik kan er niet zo gemakkelijk een andere overheen plakken omdat elk div geen vaste plaats heeft en ik zou echt niet weten hoe ik moet zorgen dat er 2 dezelfde div's komen op dezelfde plek met een andere kleur
 
als je de normale div een position:relative geeft. Daarin zet je 2 divs 1 met #start en 1 met #end die je position:absolute; top:0px; left:0px; staan ze gewoon op dezelfde positie
 
ik zal je zometeen een link sturen waar je een nog niet door mij bewerkte versie krijgt (de mijne heeft nu wat problemen omdat ik een foutje had gemaakt met het "verbeteren"). ik weet de id's van de div niet omdat die een nummer hebben wat door het script word gemaakt
 
als je over de posts gaat dan moeten ze een andere kleur krijgen die langzaam vervaagd als je de muis eraf haalt
 
ik heb zelf een site gevonden die in zijn menu doet wat ik wil(http://www.jdownloads.com/). als je op 'video tutorials' of op 'features' gaat staan met je muis krijg je een dropdown menu waar gebeurd wat ik op mijn site wil, het is me niet gelukt om in de broncode te vinden hoe het werkt, weet iemand van jullie soms hoe ze dit doen?
 
bedankt voor de link, ik heb hem gebookmarked voor als ik hem nog eens nodig zal hebben maar het was niet wat ik bedoelde, ik bedoelde de submenu-links die van kleur veranderen als de muis erop staat en langzaam weer hun oorspronkelijke kleur terugkrijgen als muis eraf gaat
 
ik weet nu gedeeltelijk hoe het werkt, met jquery ui

HTML: 
	<script>
	$(function() {
		$( "#button" ).toggle(
			function() {
				$( "#effect" ).animate({
					color: "#fff",
				}, 1000 );
			},
			function() {
				$( "#effect" ).animate({
					color: "#000",
				}, 10000 );
			}
		);
	});
	</script>

ik weet alleen nog niet hoe ik moet zorgen dat het met een hover over de tekst gebeurt en niet met een button
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan