Mon animation jquery fonctionne en FF mais pas IE ou Chrome

Je veux un 'onglet' qui sort sur la droite de la page, qui glisse (de la droite) sur clic. (et glisse à nouveau sur le 2ème clic). Mon code fonctionne bien dans Firefox, mais dans IE et le chrome, il apparaît initialement à la bonne place, mais sur le clic - immédiatement swops à la gauche de la page.Mon animation jquery fonctionne en FF mais pas IE ou Chrome

Quelqu'un peut-il me guider/m'aider s'il vous plaît pour le faire fonctionner cross browser - merci.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
</head> 

<body> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
    <div id="slider" style="position:fixed;width:340px;right:-300px;bottom:80px;z-index:999"> 
    <div id="slideButton" style="position:relative;float:left;height:120px;width:40px;background:fuchsia;text-align:center;">S<br/>l<br/>i<br/>d<br/>e<br/>r<br/></div> 
    <div id="slideContent" style="position:relative;float:left;height:120px;width:300px;background:yellow;"> 
    Slider text goes here <br/>(should slide in/out <br/>from right of page) </div> 
    </div> 

<script type="text/javascript"> 
$('#slideButton').toggle(function() { 
    $('#slider').animate({ 
     left: '-=200' 
     }, 1500, 'swing', function() { 
     // Animation complete. CALLBACK? 
    }); 
}, function() { 
    $('#slider').animate({ 
     left: '+=200' 
     }, 1000, 'swing', function() { 
     // Animation complete. CALLBACK? 
    }); 
}); 
</script> 

</body> 

</html>

Source

2011-10-03 user801347

C'est parce que vous animez la propriété css left, je pense que vous vouliez animez le right à la place. Jetez un oeil à ce fiddle

Source

2011-10-03 20:49:35

remplaçons gauche avec droit et échange + = et - =

$('#slideButton').toggle(function() { 
    $('#slider').animate({ 
     right: '+=200' 
     }, 1500, 'swing', function() { 
     // Animation complete. CALLBACK? 
    }); 
}, function() { 
    $('#slider').animate({ 
     right: '-=200' 
     }, 1000, 'swing', function() { 
     // Animation complete. CALLBACK? 
    });

fonctionne pour moi dans Chrome

Source

2011-10-03 20:48:21 topek

Eh bien, un grand merci @Interstellar_Coder . Avec votre changement je l'ai fonctionné dans tout le navigateur, mais pourquoi cela a fonctionné dans FF avant ... qui s'en soucie .. cela fonctionne maintenant ;-) - merci. – user801347

Mon animation jquery fonctionne en FF mais pas IE ou Chrome

Répondre

Questions connexes