JQuery Css Получить старую позицию из div?

Question

Я спросил, есть ли в любом случае, чтобы получить старую позицию из div в моем случае, .tile перемещается в левый угол, когда его щелкали. когда я нажимаю кнопку закрытия, он должен вернуться в положение OLD.

Вот JSFiddle

$(".tile").on("click", function (e) { 
    var pos = $(this).position(); 

    e.stopPropagation(); 
    if(!$(this).hasClass('open')) { 
     $(this).animate({ 
      "top": pos.top - pos.top, 
      "left":pos.left - pos.left, 
      "width": "100%", 
      "height": "100%" 
     }, 1000).addClass('open'); 
    } 
}); 



$(".close").on("click", function (e) { 
    e.stopPropagation(); 
    $(this).parent().stop().animate({ 
     // here i need the old position 
     "width": "100px", 
     "height": "50px" 
    }, 1000).removeClass('open'); 
}); 

CSS

.tile { 
    position: absolute; 
    background-color:#0090db; 

} 
#tp1{ 
    width: 100px; 
    height: 50px;  
} 

.close { 
    display: none; 
    background-color:#C85051; 
    position: absolute; 
    top: 0; 
    right: 5px; 
    width: 50px; 
    height: 25px; 
    text-align: center; 
} 

.open .close { 
    display: block; 
} 

HTML

<div class="tile" id="tp1"> 
    <img class="bus" src="http://s14.directupload.net/images/131130/4gzq9oaz.png" /> 
    <div class="close">x</div> 
</div> 

Answer 1

Поскольку вы позиционируете свои элементы с position:absolute один вариантом, это создать два var, который удерживает первую позицию значения:

var posL , posT; 

А затем назначьте значения в функции click следующим образом:

var posL = $(this).css('left'), 
    posT = $(this).css('top'); 

Обзор этого демо http://jsfiddle.net/2Zx3m/10/

Редактировать

Для того, чтобы в уходе с global var как точки пользователя gaynorvader вы можете позвонить весь код в функции Анонимус, как это:

(function(){ 
    /* code */ 
}()) 

О th е причина заботиться о global var вы можете увидеть больше here и here

Кроме того, вы можете себе больше о Immediately-Invoked Function

Answer 2

Получить старую позицию ... нет. Помните старую позицию ... конечно. Просто сохраните текущую позицию перед перемещением.

Answer 3

Вы можете сохранить позицию элемента, используя данные jQuery.

Более подробная информация здесь: http://api.jquery.com/jQuery.data/

$(".tile").on("click", function (e) { //opens the login 
    var pos = $(this).position(); 

    e.stopPropagation(); 
    if(!$(this).hasClass('open')) { 
     $(this).animate({ 
      "top": pos.top - pos.top, 
      "left":pos.left - pos.left, 
      "width": "100%", 
      "height": "100%" 
     }, 1000).addClass('open'); 
     $(this).data('pos', pos); // Save the position here 
    } 
}); 

$(".close").on("click", function (e) { 
    e.stopPropagation(); 
    var elem = $(this).parent(); 
    var pos = elem.data('pos'); // Retrieve the position 
    elem.stop().animate({ 
     "top": pos.top, 
     "left": pos.left, 
     "width": "100px", 
     "height": "50px" 
    }, 1000).removeClass('open'); 
}); 

jsFiddle

Answer 4

Использование margin-left в. Установите его отрицательно к положению элемента, то установите его обратно в 0, при переходе обратно: http://jsfiddle.net/2Zx3m/12/

$(this).animate({ 
      "top": pos.top - pos.top, 
      //"left":pos.left - pos.left, 
      "margin-left": - pos.left, 
      "width": "100%", 
      "height": "100%" 
     }, 1000).addClass('open'); 

И обратно:

$(this).parent().stop().animate({ 
     // here i need the old position 
     "margin-left": 0, 
     "width": "100px", 
     "height": "50px" 
    }, 1000).removeClass('open'); 

Answer 5

Это, как я бы об этом с минимальным кодом и разочарования , :]

Я использую jQuery toggleClass, чтобы полагаться в основном на css для его положения.

html,

<div class="car left"> 
    <img src="http://s14.directupload.net/images/131130/4gzq9oaz.png" alt="bus" class="minBus" /> 
    <span class="close">X</span> 
</div> 

<div class="car right"> 
    <img src="http://s14.directupload.net/images/131130/4gzq9oaz.png" alt="bus" class="minBus" /> 
    <span class="close">X</span> 
</div> 

не css,

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

.car { 
    background: lightBlue; 
    width: 160px; 
    height: 70px; 
    float: left; 
    position: absolute; 
    transition: all 1s ease; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    -o-transition: all 1s ease; 
} 

.car.active { 
    width: 100%; 
    height: 100%; 
    left: 0; 
    z-index: 10; 
} 

.right { 
    left: 400px; 
} 

.minBus { 
    width: 140px; 
    height: 56px; 
    transition: all 1s ease; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    -o-transition: all 1s ease; 
} 

.minBus.active { 
    width: 100%; 
    height: 100%; 
} 

.close { 
    display: none; 
    position: absolute; 
    right: 0; 
    top: 0; 
    background: brown; 
    width: 40px; 
    height: 40px; 
    text-align: center; 
    line-height: 40px; 
} 

.close.active { 
    display: block; 
} 

Крошечные немного jQuery,

function toggle() { 
    $('.car').on('click', function() { 
     $(this).toggleClass('active').find('.minBus, .close').toggleClass('active'); 
    }); 
} 

toggle(); 

Это используют стили для переключения между так нет расчета необходимо.

Вот JSFIDDLE.

Замечательная вещь в том, что jQuery не перекачивается в кучу inline-styles. Вместо .animate мы переключаем классы, которые содержат все стили внутри них.