backgroundPosition non va

andre9004 · 21 Ott 2012

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 · 21 Ott 2012

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 · 21 Ott 2012

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>

andre9004 · 21 Ott 2012

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 · 21 Ott 2012

devo per forza fare il terzo post...

comunque ho risolto

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

Cerca

Cerca

backgroundPosition non va

andre9004

Utente Attivo

alessandro1997

Utente Attivo

andre9004

Utente Attivo

andre9004

Utente Attivo

andre9004

Utente Attivo

Discussioni simili