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

andre9004 · 17 Mag 2012

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!!

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

criric · 2012-08-05T15:36:30+0200

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 · 2012-08-05T19:06:06+0200

diciamo che ormai ho abbandonato il progetto

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

Grazie mille!

ciccioroky · 2012-08-06T12:41:22+0200

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 · 2012-08-06T20:48:53+0200

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 · 2012-08-07T16:00:01+0200

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 · 2012-08-07T17:29:22+0200

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 · 2012-08-07T17:37:26+0200

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 · 23 Dic 2014

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...

Cerca

Cerca

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

andre9004

Utente Attivo

criric

Super Moderatore

andre9004

Utente Attivo

ciccioroky

Nuovo Utente

criric

Super Moderatore

ciccioroky

Nuovo Utente

criric

Super Moderatore

ciccioroky

Nuovo Utente

filomeni

Moderatore

Discussioni simili