jquery animate() - как перемещать/анимировать только одну часть страницы?

Я пытаюсь найти способ, чтобы изображения на веб-странице плавали как сверху, так и снизу. Я начал с того, который будет всплывать сверху.jquery animate() - как перемещать/анимировать только одну часть страницы?

(код также доступен на http://jsfiddle.net/trjthtpf/)

Код

Вот прототип/тестовый код, который я до сих пор:

<!DOCTYPE html> 
<html> 
     <head> 
       <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> 
       <meta content="utf-8" http-equiv="encoding"> 
       <title>Title of the document</title> 
       <script src="jquery.js"></script> 
<script> 

$(document).ready(function() { 
     var image = document.getElementById("myimage"); 
     image.style.display = "block"; 

     $("#myimage").animate({ 
      marginTop: "400px", 
     }, 10000, "linear"); 
    }); 
/* 
$(document).ready(function() { 
     $("#myimage_wrapper").animate({ 
      top: "+=400", 
     }, 10000, "linear"); 
    }); 
*/ 
</script> 

     </head> 
     <body> 
       <h1>This is a float test</h1> 
       <div id="myimage_wrapper"> 
         <img id="myimage" src="myimage.jpg" marginTop="0" height="199px" width="253" style="display: none"/> 
       </div> 
       <h1>this should not move but it does</h1> 
     </body> 
</html>

Что работает/Что не работает

Таким образом, приведенный выше код переместит «myimag» e "из его исходного положения вниз по странице на несколько дюймов на странице, что отлично. Но у меня есть две проблемы:

Я хотел бы, чтобы изображение выглядело так, будто он идет в удаленных от страницы. Как и то, что у яблока есть здесь: http://www.apple.com/iphone-6s/
Другая проблема заключается в том, что я хотел бы, чтобы изображение перемещалось, не перемещая другие элементы на странице.

То, что я до сих пор

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

Я также рассматриваю этот пример: jQuery animate one Div to move down when another one animates up Но не смог применить уроки оттуда сюда ...

Спасибо.

источник

2015-11-02 dot

я в настоящее время пытаюсь добавить классы дивы, как другой StackOverflow пост ... а затем попытаться переместить только див типа класса X. – dot

@dot вы можете сделать пример на [JSFiddle ] (http://jsfiddle.net)? – justinw

эй @Quoid здесь вы идете: http://jsfiddle.net/trjthtpf/ – dot

Для того, чтобы движущийся объект не воздействовал на остальную страницу, он должен быть вынут из потока документа. Это делается с помощью CSS-стиля «position: absolute».

Ваш код отлично работает, если вы добавите этот стиль в свой CSS;

#diamond_wrapper { 
    position:absolute; 
    top: -300px; 
    left: 100px; 
}

увидеть эту скрипку: http://jsfiddle.net/1wjkrk2d/

источник

2015-11-02 19:15:14

Я полностью согласен здесь, если возможно, с анимированными элементами jquery, установленными в абсолютный, с помощью css() или в таблице стилей, независимо от ваших потребностей. –

Помогает ли это вам приступить к работе? изображение, которое я заменил в div, входит со стороны, не нарушая остальную часть текста. Тайм-аут, кажется, необходимы для переполнения стека, но не должно быть необходимо в противном случае

$(document).ready(function() { 
 

 
    setTimeout(function() { 
 
      $("#diamond").removeClass("offscreen"); 
 
    }, 100); 
 
});

#diamond.offscreen { 
 
    transform: translateX(-100%); 
 
    transition: all 2s; 
 
} 
 

 
#diamond { 
 
    background-color:steelblue; 
 
    height: 199px; 
 
    width: 253px; 
 
    transform: translateX(0); 
 
    transition: all 2s; 
 
    -webkit-transition: all 2s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h1>This is a float test</h1> 
 
<div id="diamond_wrapper"> 
 
    <div id="diamond" height="199px" width="253" class="offscreen" /> 
 
</div> 
 
<h1>this should not move but it does</h1>

источник

2015-11-02 19:11:16

Почему вы не установите diamond_wrapper в position:absolute. Таким образом, элемент будет находиться вне нормального потока страниц.

.diamond_wrapper { 
    position: absolute; 
}

источник

2015-11-02 19:11:27

hm. спасибо за ответ ... но это не сработало. – dot

мой плохой Сушант, я не знаю, почему в первый раз, когда я попробовал, это не сработало. я думаю, это потому, что мне нужно было заменить "." с «#» – dot

Это загружен вопрос до некоторой степени.

Во-первых, я бы подошел к анимации, за которой вы собираетесь, совершенно другой. К сожалению, я точно не знаю, какой эффект вы пытаетесь, но я считаю, что это что-то. like this very basic example

Элемент, который вы анимируете, находится в потоке документа и будет корректировать соседние элементы, поскольку он потребляет больше места (margin-top этот элемент x намного больше).Вы можете удалить элемент из потока документов с помощью positionproperty. Иногда лучше сделать элемент position: absolute, в другие моменты, когда вам не нужно в зависимости от других переменных (явные heights или размеры элементов присутствуют?).

Кроме того, я бы не стал лично анимировать margin-top, но использовать свойство как transform: translate3d(0, -150px, 0);, которые я показываю в моем примере, и я бы лично сделать это в основном через CSS и просто вызвать помощника class с JQuery.

Вот your fiddle without изображения влияет на позиционирование любых элементов, но опять-таки это сырье примера, и лучше знать реальную цель здесь для того, чтобы обеспечить хороший подход.

источник

2015-11-02 19:15:13 justinw

Quoid, ваш пример - именно то, что мне нужно! Я попытаюсь приспособить его к моему коду, чтобы посмотреть, смогу ли я его получить. – dot

Quoid, насколько мне известно, я недостаточно хорош, чтобы css знать ... пример был бы полезен, если бы вы имеют несколько циклов. – dot

@dot Я могу объяснить немного лучше, если вы сможете уточнить, что именно вы после? Два текстовых элемента и элемент сбрасываются сверху? – justinw

Нет необходимости в какой-либо JS для этого. Это все, что вам нужно:

@keyframes odd { 
0% {transform: translate(0px,-400px); } 
50% {transform: translate(0px,400px); } 
100% {transform: translate(0px,-0px); } 

}

Проверьте это, дайте мне знать, если вы хотите, чтобы некоторые изменения по этому вопросу.

http://codepen.io/damianocel/pen/JYBEdB

источник

2015-11-02 19:39:25

jquery animate() - как перемещать/анимировать только одну часть страницы?

ответ

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