анимация div, а также его слайд - PullRequest
Новая
       19

анимация div, а также его слайд

0 голосов
/ 22 июня 2011

Будучи новым jQuery, у меня возникли проблемы с объединением кода, чтобы получить div-анимацию с левой стороны вправо и затем скольжение вниз. Высота div перед слайдом будет примерно 10px, а затем слайдом до полной высоты 351px. Я могу сделать это отдельно, но не вместе !! Буду признателен за небольшое руководство, пожалуйста, спасибо. Это мой текущий код; 

$.hideAllExcept = function(tabs,boxes){
function init() {

  // make it bookmarkable/refreshable. but, no history.
  var hash = window.location.hash;
  (!hash) ? hideShow('#' + $(boxes+':first').attr('id')) : hideShow(window.location.hash);

  // add click handler.

  $(tabs).click(function(e) {
    e.preventDefault();
    var href = $(this).attr('href');
    // add back the hash which is prevented by e.preventDefault()
    window.location.hash = href;
    hideShow(href);
  });
}

function hideShow(el) {


    $(boxes).animate({"left": "-650px"}, "slow");
     $(el).fadeIn('slow').animate({"left" : "60%",height:"351" }, 1000);

$(tabs).removeClass('active');
      $('a[href="' + el + '"]').addClass('active');
    }
    init();

};

сделал небольшой прогресс !! У меня работает на временном сервере:

http://www.tridentsolutions.co.nz/test-folder/index.html#construction_home

Но я не могу заставить ящики возвращаться в LHS, также вижу, как текст виден, так как текст в html, а не изображение в div, означает ли это, что я не могу скрыть текст? Заранее спасибо 

(function($){

$.hideAllExcept = function(tabs,boxes){
    function init() {

      // make it bookmarkable/refreshable. but, no history.
      var hash = window.location.hash;
      (!hash) ? hideShow('#' + $(boxes+':first').attr('id')) : hideShow(window.location.hash);

      // add click handler.

      $(tabs).click(function(e) {
        e.preventDefault();
        var href = $(this).attr('href');
        // add back the hash which is prevented by e.preventDefault()
        window.location.hash = href;
        hideShow(href);
      });
    }

 function hideShow(el) {

     $(el).animate({"left": "-650px"}, "slow").fadeIn('slow');
    $(el).fadeIn('slow').animate({"left" : "60%" }, 1000).animate({"height" : "351" }, 1000);


$(tabs).removeClass('active');
      $('a[href="' + el + '"]').addClass('active');
    }
    init();

};

Ответы [ 2 ]

0 голосов
/ 22 июня 2011

Если вы хотите, чтобы одна анимация запускалась после завершения другой, используйте обратный вызов .animate :

псевдо-код: 

$(selector).animate({ key: val },
                     'slow' /*easing*/,
                      function() {
                          // second animation goes here
                     });
0 голосов
/ 22 июня 2011

Вы пробовали соединить два эффекта вместе?Разбейте их на две функции animate (), а затем объедините их в нужном порядке: 

$(el).fadeIn('slow').animate({"left" : "60%"}, 1000).animate({"height:"351" }, 1000);

Каждая функция animate () выполняется последовательно, поэтому вы можете выполнять любое количество эффектов один за другим.

...