JQuery Issue Использование .animate Команда

http://api.jquery.com/animate/JQuery Issue Использование .animate Команда

На этой странице, они дают демо, где они имеют серый Див двигаться по экрану с одним нажатием кнопки.

Обратите внимание, что если вы нажимаете правую кнопку достаточно, и блок DIV достигает конца контейнера, он создает горизонтальные и вертикальные полосы прокрутки.

Я загрузил и изменил код, чтобы избавиться от свойства переполнения, и то, что я до сих пор работает КРАСИВО, в настольных браузерах.

Однако Safari на iPhone обрабатывает вещи немного по-другому. По какой-то причине Safari полностью игнорирует свойство переполнения и вместо этого расширяет окно браузера, чтобы показать вам, куда переместился блок.

Я не хочу, чтобы вы могли видеть блок. Я хочу, чтобы он был скрыт, пока вы не нажмете кнопку еще раз.

Кто-нибудь знает, что происходит?

Вот ПИК выпуска: alt text

Вот мой код:

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>

Даже если я переместил блок DIV с экрана и у меня есть переполнение: скрытый, как глобальная стиль, iPhone уложит место для него в окне браузера, чтобы показать вам, куда переместился DIV. Досада!

Спасибо заранее!

источник

2010-12-10 Alex

Не совсем уверен, что я понимаю, чего вы хотите достичь здесь. Но если вы хотите, чтобы серая рамка исчезла, когда она уходит в конец документа, я бы предложил вам обернуть div внутри другого div и установить ширину элемента wrapper на 100% и переполнение: hidden;

Как это:

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

добавить также соответствующий стиль:

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

Обратите внимание, что вам нужно абсолютное положение обертку, а также, в противном случае серый блок все равно будет виден за ее пределами. Вам также нужно будет дать ему высоту (я использовал 100% в моем примере), или он будет 0px высоким (из-за абсолютного позиционированного дочернего элемента), и ничего не будет видно.

Надеюсь, что это поможет.

источник

2010-12-10 20:23:46

Похоже, что это будет иметь смысл, и я действительно пытался это раньше. Но, черт возьми, я попробовал это снова так, как ты сказал. Но если вы оберните блок DIV в оболочку, он разбивает анимацию. Когда вы нажимаете на кнопки сейчас, ничего не происходит .... Что вы думаете? Я полностью потерял ... P.S. Чтобы уточнить, я ищу, чтобы сдвинуть весь DIV с экрана и не видеть его, пока вы не нажмете кнопку еще раз, чтобы вернуть его.Попытка имитировать переход между двумя страницами, похожий на то, что вы увидите, перемещаясь по меню в приложении для iPhone. – Alex

Я бы предположил, что это связано с тем, как вы перемещаете серый div. Значение «110%» изменяется в зависимости от родительского элемента. Вместо этого я использовал бы фактические значения пикселей и выберет ширину родителя в javascript. Что-то вроде: var offset = $ ('. Wrapper'). OuterWidth(); $ ('. block'). css ({left: offset}); (ps, извините за форматирование, не делайте разрывов строк на ipad:/ –

Yah, но он по-прежнему не меняет того факта, что когда вы завершаете блок в обертке DIV, он прерывает анимацию. – Alex

Альтернатива

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

источник

2010-12-10 21:18:03 miles

JQuery Issue Использование .animate Команда

ответ

Смежные вопросы