backgroundPosition non va

andre9004

andre9004

Utente Attivo
15 Mar 2012
104
1
0
Lombardia
Sto impazzendo :incazz2:

Ho guardato mille siti e tutti che offrono questa
Codice: 
$(document).ready(function(){
				$('#logo-top')
					.css( {backgroundPosition: "0 0"} )
						.mouseover(function(){
							$(this).stop().animate({backgroundPosition:"(0 -50px)"}, {duration:500})
						})
					.mouseout(function(){
						$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
					})
			});

perchè quel codice a me non funzionaa? rimane immobile :incazz:

Ho testato tutto... jquery funziona, la proprietà css(background-position:"0 0") funziona, il mousover funziona, il mouseout funziona e perchè l'animazione no?? :dipser:

Grazie mille in anticipo :)
 
alessandro1997

alessandro1997

Utente Attivo
6 Ott 2009
5.302
1
0
26
Roma
alessandro1997.netsons.org
Il problema sono le parentesi tonde. Usa questo:
HTML: 
<!DOCTYPE html>
<html lang="it">
    <head>
        <title>background-position</title>
        <meta charset="utf-8" />

        <script src="http://code.jquery.com/jquery-latest.min.js"></script>

        <script>
        $(function() {
            $("#logo-top").css("backgroundPosition", "0 0");

            $("#logo-top").hover(function() {
                $(this).css({
                    backgroundPosition: "0 -50px"
                });
            }, function() {
                $(this).css({
                    backgroundPosition: "0 0"
                });
            });
        });
        </script>
    </head>

    <body>
        <div id="logo-top"></div>
    </body>
</html>
 
andre9004

andre9004

Utente Attivo
15 Mar 2012
104
1
0
Lombardia
Innanzitutto grazie mille :)

ma io vorrei animarlo il passaggio... cioè mettere per esempio una durata di 500ms in modo che si vede la transizione...

edit: ho provato il tuo script ma non va

edit2:

tutto il codice
Codice: 
<body>
		
		<header>
	<div id="cont-header">
		<div id="logo-top">
			
		</div>
	</div>
</header>		
		<footer>
			
</footer>		
		<!-- SCRIPT -->
		<!-- JQUERY 1.8.2 -->
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>		
		<script type="text/javascript">
			
			$(document).ready(function(){
				$("#logo-top").css("backgroundPosition", "0 0");

            $("#logo-top").hover(function() {
                $(this).css({
                    backgroundPosition: "0 -50px"
                });
            }, function() {
                $(this).css({
                    backgroundPosition: "0 0"
                });
            });
        });
			});
			
		</script>
 
Ultima modifica:
andre9004

andre9004

Utente Attivo
15 Mar 2012
104
1
0
Lombardia
edit 3: ok il tuo script va ;) avevo sbagliato io a trascriverlo, ti chiedo scusa xD cmq ora vorrei riuscire ad animarlo ma non riesco :crying:

edit4 : scusa per il doppio post
 
andre9004

andre9004

Utente Attivo
15 Mar 2012
104
1
0
Lombardia
devo per forza fare il terzo post...

comunque ho risolto :D implementando questo plugin : http://keith-wood.name/backgroundPosRef.html


Codice: 
<!-- SCRIPT -->
		
<!-- JQUERY 1.8.2 -->
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>

<!-- background position -->
<script type="text/javascript" src="js/jquery.backgroundpos.min.js"></script>
		
<script type="text/javascript">
			
	$(document).ready(function(){

              $("#logo-top").hover(function() {
                 $(this).stop().animate({backgroundPosition : "0px -52px"}, 'fast');
              }, function() {
                 $(this).stop().animate({backgroundPosition  : "0px 0px"}, 'fast');
               });
           
	});

</script>

perchè funziona bene sia con explorer, firefox e chrome...

comunque il problema è che jquery non accetta questa sintassi backgroundPosition : "0px -52px" ma accetta solo questa backgroundPosition : "-52px" , per questo non funzionava... si puo' risolvere con backgroundPositionX o backgroundPositionY ma firefox ha problemi di incompatibilità... percui ho deciso di adottare questa soluzione.

Grazie mille :D
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
felino Mac OS e Client Mail: Stato non in linea Mac e Software 2
I nome utente non esiste nel database PHP 1
M Drag and Drop non capisco le sequenze... Javascript 1
L Suggerimento Pagespeed per non vedenti HTML e CSS 0
F comando di inclusione file audio in I-Pad non funziona HTML e CSS 1
M Immagini non usate WordPress 0
B Non riesco a trovare i cognomi con i caratteri speciali in Access (Microsoft 365) MS Access 0
G Numero zero null non deve visualizzare nulla PHP 0
F Paypal _xclick IPN non risponde PHP 1
R Variabile non risconosciuta dentro una funzione PHP 1
C ACCESS Aprire maschera se valore non presente in una combo MS Access 7
E Alert non viene mostrato PHP 1
felino Hardisk WD SATA 1TB 3.5" non si avvia! Hardware 4
K Scrip non funzionante Javascript 1
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
zorro CREATE TABLE non funziona PHP 6
L tipo boolean non funzionante su mariadb (mysql). E codice php 7.4. PHP 0
Sevenjeak Php8 non carica estenzioni PHP 0
R query DELETE non cancella i record PHP 1
otto9due Input text: accetta solo numeri e non può essere vuoto. Javascript 9
G Non vedo frecce su forme Photoshop 2
G Il mio sito dopo aver abilitato l'ssl non visualizza le immagini con indirizzi senza ssl HTML e CSS 0
P jquery refresh div non funziona Javascript 0
N Problema SEO "L'URL non si trova su Google" SEO e Posizionamento 4
S Certificato SSL non funzionante Domini 0
zorro modulo di registrazione: funziona ma non sempre PHP 2
D Form contatti non funzionante HTML e CSS 0
MarcoGrazia Trovare record nel database partendo da id non sequenziali PHP 6
M Non ho rinnovato il mio sito su Aruba... Domini 1
T IP INFO NON FUNZIONA PHP 0
Shyson Google search non trova il mio sito SEO e Posizionamento 1
E Estrarre dati da doppia tabella, banale ma non sempre PHP 1
P Data scraping in PHP non funziona PHP 4
otto9due $_FILE non passa i dati dal form PHP 1
keyascii Non è mai troppo tardi Presentati al Forum 0
N dati tabella non presi PHP 1
P Pagina modifica record che non funziona PHP 0
Shyson AUTO_INCREMENT non si aggiorna MySQL 2
Shyson Codice wp-login non funziona PHP 2
S WORDPRESS NON FA INSTALLARE PIU NULLA WordPress 9
Shyson Non mi fa accedere al sito WordPress 12
N Non Autorizzato. Dovresti rimuovere il parametro customize_messenger_channel per visualizzare l'anteprima in frontend. WordPress 1
R INSERT INTO tabella non funziona Classic ASP 2
A Problema, non so, di scale() o transform, oppure altro? HTML e CSS 0
felino Conversione da MPG a MP4: audio non sincronizzato Windows e Software 1
F Telecamere Wi-Fi non si connettono A nvr IP Cam e Videosorveglianza 0
G Finestra di dialogo che non si apre - programma NUENDO Windows e Software 0
L php mysql non salva solo id PHP 21
D Pagina non trovata Wordpress WordPress 7
S connesso, internet non disponibile ( con extebder tp-link850) Reti LAN e Wireless 0

Discussioni simili

Alto Basso