jQuery Problème Utilisation de la Command .animate

http://api.jquery.com/animate/jQuery Problème Utilisation de la Command .animate

Sur cette page, ils donnent une démonstration où ils ont un mouvement div gris sur l'écran avec le clic d'un bouton.

Notez que si vous cliquez assez souvent sur le bouton droit et que le bloc DIV atteint la fin du conteneur, il crée des barres de défilement horizontales et verticales.

J'ai téléchargé et modifié le code pour se débarrasser de la propriété de débordement et ce que j'ai jusqu'à présent fonctionne BEAUCOUP dans les navigateurs de bureau. Toutefois, Safari sur l'iPhone gère les choses un peu différemment. Pour une raison quelconque, Safari ignore complètement la propriété de débordement et à la place élargit la fenêtre du navigateur pour vous montrer où le bloc a été déplacé.

Je ne veux pas que vous puissiez voir le bloc. Je le veux caché jusqu'à ce que vous appuyez à nouveau sur le bouton.

Quelqu'un sait ce qu'il se passe?

Voici une photo de la question: alt text

Voici mon code:

div { 
position:absolute; 
background-color:#abc; 
width:100%; 
height:100%; 
margin:0px; 
max-width:100%; 
} 

body { 
margin:0px; 
padding:0px;  
} 

* { 
overflow:hidden; 
clip:rect(auto, auto, auto, auto); 
} 
</style> 

<script src="http://code.jquery.com/jquery-1.4.4.js"></script> 
</head> 

<body> 
<button id="left">&laquo;</button> <button id="right">&raquo;</button> 

<div class="block"></div> 

<script> 
$("#right").click(function(){ 
$(".block").animate({"left": "+=110%"}, "medium"); 
}); 

$("#left").click(function(){ 
$(".block").animate({"left": "-=110%"}, "medium"); 
}); 

</script>

Même si je l'ai déplacé le bloc DIV hors de l'écran et je overflow: hidden comme global style, l'iPhone va faire de la place dans la fenêtre du navigateur pour vous montrer où le DIV a été déplacé. ENNUYEUX!

Merci d'avance!

Source

2010-12-10 Alex

Pas tout à fait sûr Je comprends ce que vous voulez accomplir ici. Mais si vous voulez faire disparaître la boîte grise en partant vers la fin du document, je vous suggérerais d'envelopper la div dans un autre div, et de définir la largeur de l'élément d'enveloppe à 100% et de déborder: caché;

Comme ceci:

<div class="wrapper"> 
    <div class="block"></div> 
</div>

ajouter également le style approprié:

<style type="text/css"> 
    ... 
    .wrapper { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    position: absolute; 
    } 
</style>

Notez que vous devez la position absolue de l'enveloppe ainsi, sinon le bloc gris sera toujours visible à l'extérieur. Vous aurez aussi besoin de lui donner de la hauteur (j'ai utilisé 100% dans mon exemple) ou 0px haut (à cause de l'enfant positionné en absolu) et rien ne sera visible.

Espérons que cela aide.

Source

2010-12-10 20:23:46

Il semble que ce serait logique et je l'ai essayer avant. Mais pour le coup, je l'ai essayé exactement comme vous l'avez dit. Mais si vous enveloppez le bloc DIV dans un wrapper, il casse l'animation. Lorsque vous cliquez sur les boutons maintenant, rien ne se passe .... Qu'en penses-tu? Je suis complètement perdu ... P.S. Pour clarifier, je cherche à faire glisser la DIV entière hors de l'écran et ne pas l'avoir visible jusqu'à ce que vous cliquez à nouveau sur le bouton pour le faire revenir.Essayer d'imiter une transition entre deux pages similaires à ce que vous verriez naviguer dans les menus d'une application iPhone native. – Alex

Je suppose que cela est dû à la façon dont vous déplacez le div gris. La signification de "110%" change en fonction de l'élément parent. J'utiliserais plutôt les valeurs de pixels actuelles, et récupèrerais la largeur du parent dans le javascript. Quelque chose comme: var offset = $ ('. Wrapper'). OuterWidth(); $ ('.block'). css ({left: offset}); (ps, désolé pour le formatage, ne peut pas faire des sauts de ligne sur l'ipad:/ –

Yah mais il ne change toujours pas le fait que lorsque vous envelopper le bloc dans un wrapper DIV il casse la fonctionnalité d'animation .... – Alex

Alternative à

overflow:hidden 
HTML:/<div class="clear"></div> 
CSS:.clear {clear:both;}

Source

2010-12-10 21:18:03 miles

jQuery Problème Utilisation de la Command .animate

Répondre

Questions connexes