jQuery, вернуть объект обратно в исходное место

Question

Я мог бы использовать некоторую помощь со сценарием, который я пишу.

Посмотрите на это, я пришел до сих пор:

$('.box').click(function() { 
    $(this).animate({left: '0px'}, 500, function() { 

     var text = $('div.panel'); 

     if (text.is(':hidden')) { 
      text.animate({width: 'toggle'}); 
      $(this).children('span').html('-');  
     } else { 
      text.animate({width: 'toggle'}); 
      $(this).children('span').html('+');  
     } 

    }); 
}); 

jsFiddle

Возникает вопрос:

1. Как я сделать так в .box Див одушевленные влево на в то же время, как панель переключает?
2. Как я могу получить .box обратно в нужном месте, используя 'left': originLeft когда я его закрываю?

Answer 1

Редактирование собственного кода:

$('.box').click(function() { 

    if (!$(this).data("originalLeft")) { 
    //you store in data() the original left 
    $(this).data("originalLeft", $(this).css("left")); 
    } 

    $(this).animate({left: '0px'}, 500); 
    var text = $(this).next('div.panel'); 
    if (text.is(':hidden')) { 
    text.animate({width: 'toggle'}); 
    $(this).children('span').html('-'); 
    } else { 
    text.animate({width: 'toggle'}); 
    $(this).children('span').html('+'); 
    //you restore the original left value 
    $(this).animate({ 
     "left": $(this).data("originalLeft") 
    }, 500); 
    } 

}); 

иметь в виду, что если вы хотите symultaneous анимации вы должны избегать вызова их в функции обратного вызова

$(".some-selector").animate({left: 10}, 500, function() {/*second animation*/}} 

всегда будет создан второй анимации, как первый закончится ,

jsFiddle

Answer 2

Сохраните исходное положение на элементе, используя data(), и затем вы можете получить его, когда это необходимо.

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

Также их различные способы нацеливания на связанную текстовую панель. В настоящее время вы все оживляете. После использования next()

Am, используя класс active для определения текущего состояния коробки

$('.box').click(function() { 
    var $box = $(this), // store reference to `$(this)` when you use it more than once 
    isActive = $box.hasClass('active'), 
    $text = $box.next(), // target correct text panel  
    left, toggleText; 
    // store position first time 
    if (!isActive && isNaN($box.data('left'))) { 
    $box.data('left', $box.css('left')); 
    } 
    // set left position and icon text based on active or not 
    left = isActive ? $box.data('left') : 0; 
    toggleText = isActive ? '+' : '-'; 
    // toggle panel 
    $text.animate({width: 'toggle'}); 
    // toggle active class and animate 
    $box.toggleClass('active').animate({ left: left }, 500); 
    $box.children('span').html(toggleText); 
}); 

Вы также можете посмотреть на использование stop() инлайн с анимацией в щелчках случае пользователя на поле до того анимации полного

DEMO

Answer 3

Я всегда предпочитаю CSS анимации. Они, как правило, гораздо более плавные, но еще труднее управлять таймингом.Вот подход, основанный на CSS к вашей проблеме:

CSS для переходов:

.box  { transition: left .5s;} 
.box.on { left: 0 !important; } 

.panel { transition: width .5s; } 
.panel.on { width: 65% !important; } 

Javascript для переключения on класса:

$('.box').click(function() { 
    var $t = $(this); 

    $(".panel.on").not($t.next('.panel')).removeClass('on'); 
    $(".box.on").not($t).removeClass('on'); 

    if ($t.hasClass('on')) { 
    $t.next('.panel') 
     .removeClass('on') 
     .one('transitionend', function() { 
     $t.removeClass('on'); 
     }); 
    } else { 
    if ($t.css('left') === "0px") { 
     $t.addClass('on').next('.panel').addClass('on'); 
    } else { 
     $t.addClass('on') 
     .one('transitionend', function() { 
      $t.next('.panel').addClass('on'); 
     }) 
    } 
    } 
}); 

Fiddle:

https://jsfiddle.net/82vg42b1/