jQuery Вставка слайдов и анимация

Question

Я делаю сайт в первый раз. Я хотел бы запустить его с помощью слайдера изображений. Я хотел оживить его. Поэтому я только что создал div и поместил некоторые теги h1 и span с некоторым текстом. Я хотел бы оживить их, чтобы они скользнули сверху и боком. Я сделал кое-что об этом, но я не умею использовать jquery-ui и css-transistions. Я хотел бы оживить элементы h1 и span, например, один из приведенных ниже URL-адресов RENO HTML Template. Любые ссылки, чтобы получить такие анимации, помогут мне.

Заранее спасибо.

<div id="slideshow" align="center"> 
    <div id="black"> 
     <h1>Black</h1> 
     <span>black</span> 
    </div> 
</div> 

Answer 1

Использование jQueryUI делает его очень простым. Вы можете попробовать сделать что-то в этих строках:

$(document).click(function() { // I put on click to visualize it, but you can do it on whatever event you like, mouseover, page load and so on 
    $("h1").toggle("slide" , { 
     direction: 'left' 
    }, 500); // You can specify how fast you want your animation to be, the unit is milliseconds 
}); 

Как ответить на комментарий, здесь альтернативу для скольжения по документу готовый (demo):

HTML:

<div id="slideshow" align="center"> 
    <div id="black"> 
     <h1>Black</h1> 
     <span>black</span> 
    </div> 
</div> 

CSS:

#black { 
    position: relative; 
    margin-top: 200px; 
    width: 100px; 
} 

h1 { 
    position: absolute; 
    top: -250px; 
    left: 0px; 
} 

JS

$("h1").animate({ 
    "top":"0px" 
},1200); 

Answer 2

Вот моя Простейшим попытка пытается объяснить, как JQuery может помочь:

Во-первых, вы хотите, чтобы найти свой элемент (ы). Это можно сделать, используя:

$('name'); 

Вставить # для идентификаторов и. для классов

Если вы хотите, чтобы дети вашего DIV с идентификатором черного цвета, к примеру, сделать это:

$('#black').children(); 

Затем, вы можете анимировать затем дается определенное действие:

$('#black').children().on('click', function() { 
    $(this).slideUp(); 
}); 

this будет действовать на элемент, который вы получаете, используя линию, которую вы использовали для поиска вашего элемента. Затем просто вызовите slideUp() на нем, чтобы он скользил вверх. И есть несколько других альтернатив для клика.

Поиск того, как вы включили jQuery, и обязательно напишите этот код в отдельном файле .js.