как исчезнуть один div и исчезнуть в другом div одновременно с помощью Jquery

У меня есть три элемента div,
newDivforWraping1,#newDivforWraping5,#newDivforWraping9.

Я хочу добавить newDivforWraping1 div и исчезнуть #newDivforWraping5,#newDivforWraping9

и после этого затухание newDivforWraping1,#newDivforWraping9
и затухание #newDivforWraping5 and finally fadeIn#newDivforWraping9`

и затемнение #newDivforWraping1,#newDivforWraping9.

В любой момент на экране я видел только div.

то есть

<div1>--fade In
<div2>--fade Out
<div3>--fade Out

<div2>--fade In
<div3>--fade Out
<div1>--fade Out

<div3>--fade In
<div1>-fade Out
<div2> -- fade Out

любезно обратите внимание, что какой бы элемент div ни отображался на экране, он находится в одном и том же месте на экране. Я установил таймер, используя setInterval, чтобы повторить этот процесс, но когда пользователь наводит на него указатель мыши, я хочу, чтобы он приостанавливался (если это невозможно, то останавливайтесь). и возобновить, когда мышь не зависает на нем. У меня есть мой код здесь, и вы можете увидеть мое текущее частично работающее решение здесь. Спасибо за помощь..


jquery setinterval fadein jquery-hover
person brain storm    schedule 31.07.2013    source источник
comment
Похоже, вы ищете какую-то карусель..? Есть из чего выбрать.   -  person cssyphus    schedule 31.07.2013

Ответы (2)


arrow_upward
1
arrow_downward

Попытайся

(function () {
var i = 1;
var timer=setInterval(function () {
    if(i>3) {i=1};
    runAnimation(i, i, i);
    i++;
},1000); //increase it to 3000 if each fade in runAnimation is up to 1000 on function runAnimation


function runAnimation(a,b,g){
    c = a == 1? 'fadeIn' : 'fadeOut';
    d = b == 2? 'fadeIn' : 'fadeOut';
    h = g == 3? 'fadeIn' : 'fadeOut';

    $("#newDivforWraping1")[c](0); //if a ==1 then $("#newDivforWraping1").fadeIn(0) else $("#newDivforWraping1").fadeOut(0)
    $("#newDivforWraping5")[d](0);
    $("#newDivforWraping9")[h](0);
}

$("#newDivforWraping1,#newDivforWraping5,#newDivforWraping9").hover(function() {
    clearInterval(timer);
}, function(){
    timer=setInterval(function () {
    if(i>3) {i=1};
    runAnimation(i, i, i);
    i++;
},1000);
});    

})();

Демо

http://jsfiddle.net/RQNrt/32/

person Telvin Nguyen    schedule 31.07.2013
comment
отличный! это решение работает так, как я хотел. Если бы вы могли объяснить, как работает функция runAnimation, мне и другим было бы полезно это понять. - person brain storm; 01.08.2013
comment
c, d, h - это имя функции фейда (In/Out). Проблема заключается в ротационной активации этих флагов a, b или g каждый цикл временного интервала. Вы можете увеличить каждое затухание до 1000 миллисекунд, тогда вы также должны увеличить продолжительность таймера до 3000. Если вам понравилась демонстрация, просто отметьте мой ответ. Рад помочь. - person Telvin Nguyen; 01.08.2013
comment
Я проголосовал за вас и отметил ваш ответ тоже. Вы можете прокомментировать, что это значит $("#newDivforWraping1")[c](0)? - person brain storm; 01.08.2013
comment
Я только что добавил больше комментариев в свой ответ. - person Telvin Nguyen; 01.08.2013

arrow_upward
0
arrow_downward

Если вы хотите сделать и то, и другое одновременно, не используйте обратный вызов fadeIn/fadeOut для второго вызова. Потому что HJavascript запускает следующий затухающий эффект напрямую.

$("#newDivforWraping1").fadeIn(1000);
$("#newDivforWraping5").fadeOut(1000);
person Bernhard    schedule 31.07.2013