Как применить эффект пользовательского интерфейса jQuery (слайд + флип) одновременно? - PullRequest
Новая
       14

Как применить эффект пользовательского интерфейса jQuery (слайд + флип) одновременно?

2 голосов
/ 09 февраля 2012

Здесь у меня есть простое поле div: 

<div id="tile">foo</div>

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

Чтобы сделать это, я сделал следующее:

Сначала я установил div как "снаружи"видимой области через css: 

#tile{
 position: absolute;
 left: -500px;
 width: 162px;
 height: 162px;
}

Затем, когда веб-сайт загружается, я применяю эффект слайда: 

function slide(){
    $("#tile").animate({"left": "+=500px"}, 600);
}

Теперь это работает отлично.

Чтобы применить эффект отражения, я использовал этот подключаемый модуль для jquery: http://lab.smashup.it/flip

Чтобы переключить, я делаю следующее: 

function flip(){
    var c = $("#tile").html();
    $("#tile").flip({
        direction:'lr',
        content:c
    });
}

Один этот эффект тоже отлично работает.

НО , если я COMBINE и то и другое не будет работать. 

$(document).ready(function(){
    slide();
    flip();
});

В результате элемент div сначала переворачивается, а затем переходит(без эффекта скольжения) в конечное положение.

Есть ли какое-либо решение для этого?

...