Jquery background-image fade (Effetto comparsa background-image)

andre9004

Utente Attivo
15 Mar 2012
104
1
0
Lombardia
Ciao a tutti... vorrei ottenere un effetto di fade (incremento dell'opacità lentamente) di un background-image di un div.

Se si puo' va bene con qualsiasi script, css, jquery (preferibile, ecc...

io ho provato cosi':

Codice:
$('li').mouseover(function() {
		$('li').fadeIn("slow", function() {
		       $('li').css('background', 'url(img/template/bg-li-menu.png) repeat-x');
		});
 });

Problema: Appare l'immagine di sfondo (background-image) ma non con effetto comparsa lineare (incremento dell'opacità) come posso fare? grazie mille in anticipo!! :D

ps. esempio effetto fade --> http://signpharma.com/ (scomparsa lineare dell'immagine)
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,
ho visto solo oggi questa discussione, ho appena iniziato con jquery quindi a maggio cmq non sapevo rispondere
se non hai risolto
puoi provare qualcosa del genere
altrimenti sarei curioso di sapere come hai risolto
HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>Prova</title>
        <style>
            ul {
                width:250px;
            }
            li {
                background-image: url(img/template/bg-li-menu.png);
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <ul>
            <li></li>
        </ul>
        <script>
            $(document).ready(function() {
                $('li').css({opacity:0.1});
            })
            $("li").hover(function() {
                $(this).animate({opacity:1}); 
            },function(){
                $(this).animate({opacity:0.1});
            });           
        </script>

    </body>
</html>
 

andre9004

Utente Attivo
15 Mar 2012
104
1
0
Lombardia
diciamo che ormai ho abbandonato il progetto :p

comunque non ci sono riuscito ehehe pero' se funziona mi interesserebbe la soluzione :)

Grazie mille!
 

ciccioroky

Nuovo Utente
31 Lug 2012
25
0
1
Avrei bisogno anche io delle informazioni richieste.
Nel pomeriggio proverò lo script consigliato e vi faro sapere se funzia.

Vorrei aggiungere questa opzione:
Ho una lista ul li, quando mi posiziono con il cursore sull'elemento li vorrei che cambiasse l'immagine di sfondo di un div.

Come fare?

Gracias
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
La prima idea che mi è venuta in mente
HTML:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<ul>
    <li id="yellow"><a href="#">Giallo</a></li>
    <li id="green"><a href="#">Verde</a></li>
    <li id="red"><a href="#">Rosso</a></li>
    <li id="blue"><a href="#">Blu</a></li>
</ul>
<div style="width:80px;height:80px;border:1px solid black" id="div"></div>
<script>
    $("li").each(function() {
        $(this).hover(function() {   
            var colore = $(this).attr('id');           
            $("#div").css({
                "background-color":colore
            })
        })
    })       
</script>
io ho usato background-color ma puoi benissimo usare background-image
 

ciccioroky

Nuovo Utente
31 Lug 2012
25
0
1
ciao a tutti.
ho provato il codice di @criric ma non sono riuscito ad utilizzare le immagini al posto dei colori. In merito avevo degli interrogativi che sto cercando di affrontare:
- il background-color sintatticamente è diversa da background-image perchè nella seconda la stringa che pesca l'img è
url(percorso img)
mentre nella prima va bene anche solo specificare il colore come a fatto criric.

Quindi la variabile colore dell'esempio riportato restituisce solo l'id dell'elemento li su cui ho il mouse e quindi completerà la stringa in questo modo "background-image:idelementoli".
Io posso avere l'id dell'elemento li "percorso/immagine/img.jpg" però poi bisognerebbe concatenare una stringa che andrà a completare la sintassi in maniera corretta.

ho provato in questo modo ma non funzia
Codice:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<ul>
    <li id="illusration"><a href="#">Illustration</a></li>
    <li id="shop"><a href="#">Shop</a></li>
    <li id="wedding"><a href="#">Wedding</a></li>
</ul>
<div style="width:80px;height:80px;border:1px solid black" id="div"></div>
<script>
    $("li").each(function() {
        $(this).hover(function() {   
            var link_img = 'url(barra_menu/immagini/' + $(this).attr('id') + '.png';           
            $("#div").css({
                "background-image":link_img
            })
        })
    })       
</script>

il problema sarà sicuramente qui
Codice:
            var link_img = 'url(barra_menu/immagini/' + $(this).attr('id') + '.png';


grazie mille a tutti
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
il problema sarà sicuramente qui
si, non chiudi la parentesi e forse ci vanno anche gli apici
Codice:
  var link_img = 'url("barra_menu/immagini/' + $(this).attr('id') + '.png")';
 

ciccioroky

Nuovo Utente
31 Lug 2012
25
0
1
E hai anche ragione. Infatti funziona.
Colpa mia.

Adesso cerco di riuscire ad inserire un'effetto dissolvenza fra le immagini e posto il risultato.
 

filomeni

Moderatore
Membro dello Staff
MOD
14 Mag 2006
1.054
6
38
53
Roseto degli Abruzzi (TE)
www.sitiweb.cloud
Ciao, mi inserisco nella discussione e vi presento un sisstema jquery funzionante e testato personalmente l'unico problema me lo da su safari, ma devo capre il motivo. Comunque testato su IE, Firefox e Opera e va alla grande. Ecco il codice:
Codice:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">

$(window).load(function(){
$('img.bgfade').hide();
var dg_H = $(window).height();
var dg_W = $(window).width();
$('#wrap').css({'height':dg_H,'width':dg_W});
function anim() {
    $("#wrap img.bgfade").first().appendTo('#wrap').fadeOut(10000);
    $("#wrap img").first().fadeIn(10000);
    setTimeout(anim, 10000);
}
anim();})
$(window).resize(function(){window.location.href=window.location.href})
</script>
</head>
<body>
<div id="wrap">
<img class="bgfade" src="http://www.......it/images/_1.JPG">
<img class="bgfade" src="http://www.........it/images/_3.jpg">
<img class="bgfade" src="http://www.........it/images/_4.JPG">
<img class="bgfade" src="http://..../......">
</div>
</body>
Provate...
 
Ultima modifica:
Discussioni simili
Autore Titolo Forum Risposte Data
D Jquery - modifica elemenento onlick jQuery 1
E Problema jquery Success jQuery 2
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
E PHP & jQuery PHP 8
P jquery refresh div non funziona Javascript 0
P lanciare script asp (o php) da jquery Javascript 1
T aiuto per trasformare un quiz fatto in JS in un quiz in JQUERY jQuery 0
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
MarcoGrazia Validazione remota tramite plugin (jquery validate) Snippet Javascript 0
M Come selezionare e deselezionare radiobutton con jquery jQuery 1
M Come validare textarea con jquery jQuery 0
R Aggiornare record mysql con Ajax, jQuery e php Ajax 2
P Funzione jQuery Ajax invio file a php jQuery 1
Cosina Menu fisso copre i titoli quando cliccati nel sommario jQuery Javascript 4
MarcoGrazia jquery validate() controllo checkbox jQuery 2
D assegnare risultato di una jquery ad una text Javascript 2
felino [JQuery] Append dopo ultimo ul li del primo livello jQuery 2
A php metodo post jquery non da mai errore jQuery 4
T problema con select dinamica con jquery Javascript 0
P jquery .load jQuery 10
E Div che scompare con scroll jquery Javascript 0
T script jquery non funziona più dopo il passaggio a MVC jQuery 5
B jQuery - hide & show li items jQuery 13
Y jQuery Animation Switch On Off jQuery 0
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
O [Javascript] Conflitto Jquery: forse... Javascript 0
MarcoGrazia jquery validate, necessità di validare almeno un elemento select su due jQuery 1
M inserire i dati ottenuti da una jquery in una tabella già esistente jQuery 1
D Jquery, conflitto tra loro risolvibile? jQuery 7
M Filtrare risultati con valori checkbox passati con jquery jQuery 2
Tommy03 Variabile PHP dentro a JQuery PHP 3
L Problema jQuery validation AJAX (PHP 7) PHP 6
G Campo HTML input file con jQuery jQuery 0
P Jquery event nel foreach php jQuery 3
M leggere con jquery/ajax in una function javascript record di database sql server Javascript 0
A [Javascript] Ajax, Jquery e PHP Javascript 1
trattorino Mentions Auto Suggesting da jquery a php PHP 2
X Problema con jquery e ajax jQuery 2
G Inserzione script nella pagina html per jquery jQuery 8
MarcoGrazia Validazione forum con jquery.validate jQuery 2
Shyson Smoot scrolling jQuery nella pagina jQuery 0
felino [Javascript] [jQuery] Slick Carousel: visualizzare una porzione dell'immagine successiva Javascript 0
L Scelta form con jquery jQuery 1
F [Javascript] Aprire file tramite jquery Javascript 0
R Aiuto Jquery jQuery 1
G [HTML] Jquery e tooltipster's jQuery 5
I Jquery fadeout-fadein html data jQuery 0
trattorino Estrarre Nome Utente jquery div php PHP 9
L jquery e json controllo valori da determinate chiavi - keys jQuery 0

Discussioni simili