Анимация перетаскиваемого объекта в исходное положение

У меня есть div с фиксированным положением, поэтому я просто вижу вкладку, когда вы нажимаете кнопку на этом элементе div, она отображается на сцене, а также становится перетаскиваемой, настолько хорошей. Теперь я пытаюсь вернуть этот же элемент в исходное положение аниматором, и я также хочу, чтобы он не перетаскивался, а скрывался как вкладка. Я пытался с $ (some-element) .animate(), и я могу видеть на HTMl, что он задает пропитеры, которые я ему даю, но он никогда не становится анимированным, я также не знаю, как удалить функцию перетаскивания. Я изучаю все это, и я буду признателен, если кто-то поможет мне немного разобраться, как это сделать. Большое спасибо, ребята !!. я оставляю вам свой код jquery и скрипку, чтобы вы, ребята, могли посмотреть, что происходит.Анимация перетаскиваемого объекта в исходное положение

JQuery

$("#minimize").on("click", display); 
function display(){ 
    if(!$("#box").hasClass("draggable")){ 
     $("#box").animate({bottom: "20"}).addClass("draggable"); 
     $(".draggable").draggable();  
     }else{ 
      $("#box").removeClass("draggable"); 
      $("#box").animate({ 
      bottom: -221 
      });  
    } 
}

здесь те Js скрипку http://jsfiddle.net/xtatanx/PNEhD/

еще информация:

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

Второе редактирование:

до сих пор я пришел с этим, которым является хорошим улучшением: http://jsfiddle.net/xtatanx/PNEhD/ , но я хотел бы избежать скачка, когда стилевые сбрасывается в Roder, чтобы жидкость анимации везде, где объект находится

источник

2013-05-30 Jhonnatan Gonzalez Rodriguez

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

Вот ваш обновленный JS

$("#minimize").on("click", display); 

function display() { 
    if (! $("#box").hasClass("draggable")) { 
     $("#box").animate({bottom: "20"}).addClass("draggable"); 
     $(".draggable").draggable();  
    } else { 
     $("#box").removeClass("draggable"); 
     $('#box').css('top', ''); 
     $("#box").animate({ 
      bottom: -221 
     });  
    } 
}

Вот ссылка на скрипку: http://jsfiddle.net/PNEhD/1/

источник

2013-05-30 23:12:09

эй, это работает хорошо до сих пор для меня, но я на самом деле хочу, чтобы не идти снизу, но возвращается к его начальное положение, поэтому я сделал это http://jsfiddle.net/xtatanx/PNEhD/, который на самом деле работает, я хотел бы знать, является ли tere способ избежать прыжка, которое требуется при сбросе верхней и левой позиции, чтобы оживить анимацию! –

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

Да! Я работаю над этим, и я, наконец, сделал это, он вернулся к своей позиции, плавно анимированный :) ... теперь я работаю над еще несколькими проблемами, например, что если вы измените размер окна, объект перетаскивания не сдвинется по отношению к окну, до сих пор я просто заставил его двигаться относительно, когда ящик сведен к минимуму, но не тогда, когда отображается окно, это беспорядок: p –

Анимация перетаскиваемого объекта в исходное положение

ответ

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