Span infaden met jQuery
Ik ben totaal niet thuis in jQuery maar probeer een image fade te maken voor een website. De bedoeling is dat bij een mouseover de oppacity fade naar 0.3. Maar dat de span die ik er in heb gezet infade bij de mouse-over. Ik heb op dit moment het volgende:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
$(function() {
$('.cover').each(function() {
$(this).hover(
function() {
$(this).stop().animate({ opacity: 0.3 }, 400);
},
function() {
$(this).stop().animate({ opacity: 1.0 }, 400);
})
});
});
</script>
$(function() {
$('.cover').each(function() {
$(this).hover(
function() {
$(this).stop().animate({ opacity: 0.3 }, 400);
},
function() {
$(this).stop().animate({ opacity: 1.0 }, 400);
})
});
});
</script>
Dit is mijn functie om de image zelf te faden. Dit werkt zoals ik wil. Ik weet alleen niet wat ik er bij moet scripten om ook de span in deze animatie in te faden. $(this.span).stop().animatie({ opacity: 1.0}, 400); gokte ik zo met mijn botte programmeer kennis. Maar dat werkt niet.
Mijn HTML ziet er als volgt uit:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div class="cover" style="padding-right: 65px;">
<a href="#"><img src="images/cover_nowhere.jpg" alt="Vade in tekst - invade " />
<span style="position:absolute;">tekst - tekst</span>
</a>
</div>
Wil me graag meer verdiepen in jQuery maar kom hier even niet uit. Iemand een idee? Voorbeeld is hier te bekijken: Klik.
je each is ook verkeerd?
$.each(".cover", function(key, value)
Ik heb dit gemaakt maar het werkt niet echt:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
$(".cover.img").hover(function(){
$(".cover.span").fadeIn("slow");
},
function(){
$(".cover.span").fadeOut();
});
</script>
$(".cover.span").fadeIn("slow");
},
function(){
$(".cover.span").fadeOut();
});
</script>
Het eindresultaat dient er uit te zien zoals dit: http://www.samchirnside.com . Iemand nog een idee?
edit; je selector klopt niet: $(".cover.img")
moet zijn $(".cover a img")
Gewijzigd op 01/11/2012 15:53:12 door Jaron T
Het is vooral de CSS die goed moet zijn, misschien dat het daar ergens mis gaat?
Toevoeging op 01/11/2012 17:03:54:
Ik was een grote pannekoek. Ik heb de CSS voor de jQuery nu direct in het HTML bestand gezet en het werkt nu perfect! Wist niet dat de CSS van de jQuery direct in het HTML bestand moest.
Toevoeging op 01/11/2012 17:20:11:
Oke ik ben er dus nog niet helemaal uit. Het probleem is nu dat de images niet aanklikbaar zijn en de a href tag dus niet goed functioneert. Iemand een idee?
Nogmaals het voorbeeld hier: www.fogmountainrecords.com
Gewijzigd op 01/11/2012 17:35:12 door Remy Brokke
En de CSS die van toepassing is op jQuery hoeft overigens niet direct in de html.
Mag gewoon in een stylesheet.
Gewijzigd op 02/11/2012 10:55:32 door Tim S