Far apparire sfondo con fade su hover di un bottone

[micia]

Ciao a tutti,
avrei questa esigenza:
in un div ho due pulsanti, quando passo col mouse su questi due pulsanti dovrà comparire un'immagine di sfondo sul div che li contiene.
Fin qui tutto ok, il problema è che non riesco a far apparire questa immagine di sfondo lentamente con un effetto di dissolvenza.

Ho fatto in questo modo:

CSS:
<style>.contenitoreindexhover{
background:url(immagini/outdoorindex.jpg) no-repeat center center;
transition-property: opacity;
-webkit-transition: 3s linear;
-moz-transition: 3s linear;
-o-transition: 3s linear;
-ms-transition: 3s linear;
transition: 3s linear;
}
</style>

JS:
<script>
$(function() {
$('#a').hover(function() {
$('.contenitoreindex').addClass('contenitoreindexh over');
}, function(){
$('.contenitoreindex').removeClass('contenitoreind exhover');
});
});
</script>

HTML:
<div class="contenitoreindex">
<div class="contloghi">
<div class="floatleft">
<div class="contlogo"><a id="a" href="homeoutdoor.aspx"><img src="immagini/logooutdoorindex.png" alt="" class="tooltip" title="Entra" /></a></div>
</div>

<div class="floatleft">
<div class="contlogo"><a id="safety" href="homesafety.aspx"><img src="immagini/logosafetyindex.png" alt="" class="tooltip" title="Entra" /></a></div>
</div>
</div>
</div>

Come posso fare?
Grazie mille!

[cavicchiandrea]

O lo fai con i css o lo fai con jquery (il codice jquery credo sia sbagliato) fare un ibrido come hai fatto penso sia la soluzione peggiore. In rete trovi diversi tutorial che possono aiutarti in entrambi i modi

[micia]

Ciao,
ho cercato ma purtroppo non trovo nulla che faccia al caso mio (hover su un altro elemento + fade).
Ho anche provato con questo:

$(function() {
$('#a').hover(function() {
$('.contenitoreindex').css('background', 'url(immagini/outdoorindex.jpg) no-repeat center center');
$('.contenitoreindex').css('transition', 'background 2s');
}, function() {
// on mouseout, reset the background colour
$('.contenitoreindex').css('background', '');
});
});

Ma non funziona

[lukezz]

$(function() {
$('#a').hover(function() {
$('.contenitoreindex').addClass('la_tua_classe', 1000);
}, function(){
$('.contenitoreindex').removeClass('la_tua_classe', 1000);
});
});

Prova così

[lukezz]

Dimenticavo, dovresti la libreria UI di jquery per funzionare

http://ajax.aspnetcdn.com/ajax/jquer...4/jquery-ui.js

[micia]

Purtroppo non funziona.
Ho provato con la transizione di movimento e questa funziona ma il fade/opacity no...

[lukezz]

Che versione di jquery usi? inoltre hai incluso la libreria UI?

[micia]

Non funziona, semplicemente mi ritarda l'apparizione dello sfondo di un secondo

Dimenticavo, dovresti la libreria UI di jquery per funzionare

http://ajax.aspnetcdn.com/ajax/jquer...4/jquery-ui.js

[micia]

uso http://code.jquery.com/jquery-1.7.0.min.js

[lukezz]

Ho fatto un esempio su http://jsfiddle.net/9an1Lxfk/11/
Prova ad inserire le immagini (io ho provato con un background-color) e posta il link.