Форумы портала PHP.SU :: Версия для печати :: Анимация с задержкой в слайдере

Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Анимация с задержкой в слайдере

Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript » Анимация с задержкой в слайдере

Страниц (1): [1]

1. Ismail - 14 Ноября, 2014 - 19:08:37 - перейти к сообщению

Доброго времени суток. Искал готовые решения, но безуспешно. Подскажите, как реализовать следующую вещь:

Есть слайдер, разметка такая:

CODE (html):
скопировать код в буфер обмена

 
<ul>
<li>
<h2>Заголовок 1</h2>
<p>Описание 1</p>
</li>
<li>
<h2>Заголовок 2</h2>
<p>Описание 2</p>
</li>
</ul>
 
 

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

Если нужен полный код слайдера, скину.

2. dXdYdZ - 14 Ноября, 2014 - 19:25:03 - перейти к сообщению

Если используете JQuery, то там есть функция delay
http://jquerybook[dot]ru/api/[dot]delay()-fn50[dot]html
Если пишете на чистом JS, то можно использовать функцию setTimeout().

3. LIME - 14 Ноября, 2014 - 19:46:11 - перейти к сообщению

CODE (html):
скопировать код в буфер обмена

<h2 data-delay="no-delay">Заголовок 2</h2>
<p data-delay="300">Описание 2</p>

отпишись что получилось
(Добавление)
если нужны блики на заголовке могу придумать что-нибудь
(Добавление)
и зо звуком чтобы...чтоб ка феррари выезжало!
(Добавление)
добавь data-sound="ferrariEngineStartSound"

4. Viper - 14 Ноября, 2014 - 21:48:21 - перейти к сообщению

dXdYdZ лучше вообще читать оригинальные описания api, а не на сайтах наподобие w3school.

Как минимум есть animate() для этого.

5. LIME - 14 Ноября, 2014 - 21:50:07 - перейти к сообщению

Viper как минимум твой ответ настолькоже содержателен как и мой
показал список и обещал показать то что важно
ну не капец ли ?
(Добавление)
безнадега
старайтесь кто еще готов))

6. Viper - 14 Ноября, 2014 - 21:56:32 - перейти к сообщению

LIME я не ТС отвечал.

Ismail пишет:

Если нужен полный код слайдера, скину.

приводите и html и js

7. LIME - 14 Ноября, 2014 - 21:58:37 - перейти к сообщению

Viper ааа)
ну да)

8. Ismail - 15 Ноября, 2014 - 07:04:18 - перейти к сообщению

LIME пишет:

<h2 data-delay="no-delay">Заголовок 2</h2>
<p data-delay="300">Описание 2</p>

Не помогло.

Вот весь код:

Спойлер (Отобразить)

CODE (html):
скопировать код в буфер обмена

<!DOCTYPE html>
<html>
<head>
        <style type="text/css">
        body {
                background: #eee; 
                margin: 0;
                font-family: arial;
        }
        .wrapper {
                background: #fff;
                width: 700px;
                padding: 1px 15px 15px;
                margin: 0 auto; 
        }
        .slider {
                z-index: 9;
                width: 700px;
                height: 290px;
                overflow: hidden;
                margin: 0 0 7px;
                position: relative;
        }
        .slider ul,
        .slider li {
                padding: 0;
                margin: 0;
                list-style-type: none;
        }
        .slider ul {
                width: 9999px; 
        }
        .slider ul li {
                list-style-type: none;
                float: left;
                width: 700px;
                height: 290px;
        }
        .slider .nav {
                position: absolute;
                left: 15px;
                bottom: 12px; 
        }
        .slider .nav span {
                opacity: 0.9;
                background: #fff;
                margin: 0 8px 0 0;
                width: 16px;
                height: 16px;
                border-radius: 8px;
                cursor: pointer;
                overflow: hidden;
                display: block;
                float: left;
                box-shadow: 0 1px 2px #000;
        }
        .slider .nav span.on {
                background: #2e9419;
        }
        </style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
        $(".slider").each(function () { // обрабатываем каждый слайдер
        var obj = $(this);
        $(obj).append("<div class='nav'></div>");
        $(obj).find("li").each(function () {
        $(obj).find(".nav").append("<span rel='"+$(this).index()+"'></span>"); // добавляем блок навигации
        $(this).addClass("slider"+$(this).index());
        });
        $(obj).find("span").first().addClass("on"); // делаем активным первый элемент меню
        });
});
 
function sliderJS (obj, sl) { // slider function
        var ul = $(sl).find("ul"); // находим блок
        var bl = $(sl).find("li.slider"+obj); // находим любой из элементов блока
        var step = $(bl).width(); // ширина объекта
        $(ul).animate({marginLeft: "-"+step*obj}, 500); // 500 это скорость перемотки
}
 
//автопромотка
window.setInterval(function(){var n = $(".slider .nav span.on").next();if(n.length==0)n=$(".slider .nav span").first();n.click();},5000);
 
$(document).on("click", ".slider .nav span", function() {
        var sl = $(this).closest(".slider"); // находим, в каком блоке был клик
        $(sl).find("span").removeClass("on"); // убираем активный элемент
        $(this).addClass("on"); // делаем активным текущий
        var obj = $(this).attr("rel"); // узнаем его номер
        sliderJS(obj, sl); // слайдим
        return false;
});
 
</script>
</head>
<body>
<div class="wrapper">
        
        <div class="slider">
                <ul>
                        <li><h2>Заголовок 1</h2>
                                <p>Описание 1</p>
                        </li>
                        <li><h2>Заголовок 2</h2>
                                <p>Описание 2</p>
                        </li>
                        <li><h2 >Заголовок 3</h2>
                                <p>Описание 3</p>
                        </li>
 
                </ul>
        </div>
</div>
</body>
</html>

9. LIME - 15 Ноября, 2014 - 08:57:24 - перейти к сообщению

Ismail пишет:

Не помогло.

сожалею
не поможет
никогда
эээх не удалось
но попробовать стоило
поробуй еще раз
вдруг что не так прописал
(Добавление)
а если вкусную шаурму мне сделаешь я может че дельное подскажу)

10. Viper - 15 Ноября, 2014 - 09:10:06 - перейти к сообщению

Ismail примерно так

$(ul).animate({
marginLeft: "-"+step*obj
}, 500, function(){
$('.slider p').delay(500).show();
});

но я бы взял готовый слайдер.

11. Ismail - 15 Ноября, 2014 - 17:21:04 - перейти к сообщению

Viper пишет:

но я бы взял готовый слайдер.

Спасибо, так и сделал.

LIME

давай, дасвидания Ха-ха