2012-03-17 2 views
0

Я в настоящее время программирую сайт для клиента. Она хочет, чтобы ее имя было посередине экрана, и когда пользователь нажимает на свое имя; она хочет, чтобы ее имя открылось, как занавес, и исчезло, в то время как картина и меню исчезли.Как вы открываете шторы и исчезаете в jquery?

Она хочет, чтобы ее имя переместилось влево и исчезло; и в то же время ее фамилия движется вправо и исчезает.

Вскоре после этого, картина с замиранием меню в.

Спасибо за любую оказанную помощь.

+1

Вы нашли это в Google? – Geekfish

+0

Я не уверен, что вы подразумеваете под «как занавес». Это может означать, что изображение срезается посередине, а затем две части затем отделяются от прикосновений нижних углов, но это также может означать, что две части просто скользят друг от друга. Аналогично, это также может означать, что текст (ее имя) подтягивается снизу. Это слишком неоднозначно. – wecsam

ответ

2

Это быстрая и грязная первая версия, используя абсолютное позиционирование, хотя я уверен, что вы можете сделать это с помощью position: relative, но только, чтобы показать общую идею (Fiddle):

$(function(){ 
    $('div').click(function(){ 
     $('span.first').animate({ 
      left: '-=50' 
     }); 

     $('span.second').animate({ 
      left: '+=50' 
     }); 

     $(this).fadeOut(); 
    }); 
})();​ 

HTML:

<html> 
<body> 
    <div> 
     <span class="first">Na</span><span class="second">me</span> 
    </div> 
</body> 
</html>​ 

CSS:

div { 
    position:relative; 
    background-color: red; 

} 
span { position: absolute; font-size: 20px; } 
span.first { left: 50px } 

span.second{ left: 73px } 

+0

Кстати, я покинул меню, но что-то подобное происходит после эффекта fadeOut(), который я применил к имени. –

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