2015-05-26 3 views
1

Это редактирование вопроса добавить следующее .... анимировать объект с JQuery просто как следует .....JQuery анимации переместить один класс в DIV

$("div").animate({left: '250px'}); 

Но было бы идеально, если бы вместо левой: "250'px это может быть целью

div/class something like this.... 
$("div").animate({'.title-area-main'}); 

Так что этот вопрос относится к немного HTML, у меня есть этот класс внутри DIV называется обертка .. ..

<div class="logo"><img src="images/mthc/logo-main.png" height="150px" width="420px"></div> 

он определен в CSS как ....

#wrapper { 
left: 50%; 
    top: 50%; 
    width:720px; 
    height:300px; 
    position:fixed; 
    margin-top: -50px; 
    margin-left: -100px; 
    transform: translate(-25%, -25%); 
    z-index : 5001; 
} 
.logo{ 

    float:left; 
    width:60%; 
    z-index : 5005; 
} 

назначения класса "логотип" является в этой части страницы HTML ....

<a href="index.html" class="tile-area-title fg-white small" alt="musability logo"><img src="images/mthc/logo.png"></a> 

и стиль css для этого поставляется с классом «title-area-title» в соответствии с ссылкой на href ....

.metro .tile-area .tile-area-title { 
    position: fixed; 
    top: 0; 
    left: 260px; 
    border: 0 ; 
    height: 120px; 
    width: 800px; 

} 

Я знаю, что смогу использовать какой-нибудь действительно крутой анимационный анимационный движок css3, чтобы переместить логотип на место тега. это было бы здорово, если я использую Internet Explorer версии 50000 ... , поэтому я в основном ищу способ jquery сделать это и в настоящее время не имею опыта анимации jquery, если это возможно. Любые советы были бы очень полезными.

+3

"что было бы здорово, если я использую Internet Explorer версии 50000": D Я извините, хотя, ваш вопрос неясно. – odedta

+1

Вы пробовали [JQueryUI] (https://jqueryui.com/)? –

+0

Я искал тот факт, что не все браузеры поддерживают css3 – havingagoatit

ответ

1

Чтобы расположить элемента:

function getPosition(element) { 
      var xPosition = 0; 
      var yPosition = 0; 

      while (element) { 
       xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft); 
       yPosition += (element.offsetTop - element.scrollTop + element.clientTop); 
       element = element.offsetParent; 
      } 
      return { x: xPosition, y: yPosition }; 
     } 

Тогда вы называете это так:

var y = getPosition(document.getElementById('mydivID')).y; 
var x = getPosition(document.getElementById('mydivID')).x; 
+0

на самом деле я собирался бросить функцию в текущую функцию таймера, поэтому, когда она завершается, она просто выполняет анимацию ... до сих пор у меня это ... $ ("div ") .animate ({left: '250px'}); – havingagoatit

+0

похоже на много хастла, а не просто на выполнение анимации, чтобы просто перейти к одной и той же верхней и левой позиции маркера целевого класса – havingagoatit

+1

, затем сделать $ ("# div"). Animate ({left: $ ('# destinationid..) положение() слева, вверху: $ ('# destinationid') положение()..Вверх}); – loli

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