Смените два divs с тем же классом

Question

Я вроде как застрял с этой второстепенной частью, и я не могу двигаться дальше с моим проектом. В основном то, что я пытаюсь сделать, - fadeIn/fadeOut между двумя div с тем же классом, но сохраняйте функцию как можно короче.

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

HTML:

<div class="ref-title">Sample Title #1</div> 
<div class="ref-title">Sample Title #2</div> 

JS:

function titleSwap() { 
    $('.ref-title:hidden:first').fadeIn(500).delay(2000).fadeOut(500, function() { 
     $(this).appendTo($(this).parent()); 
     titleSwap(); 
    }); 
} titleSwap(); 

CSS:

.ref-title { 
    display: none; 
} 

JS Fiddle Demo

Так что нужно первый DIV отображается в виде блока, а затем он исчезнет и другой появится и продолжится так ... Любые советы?

Answer 1

JSFiddle - Добавление скрытого класса к DIV вы хотите, чтобы начать, как скрытыми, а затем изменить функцию, как показано ниже должен работать.

HTML

<div class="ref-title">Sample Title #1</div> 
<div class="ref-title hidden">Sample Title #2</div> 

CSS

.hidden { 
    display: none; 
} 

JS

(function titleSwap() { 
    $('.ref-title').not('.hidden').delay(2000).fadeOut(500, function() { 
     var $me = $(this); 
     $('.ref-title.hidden').removeClass('.hidden').hide().fadeIn(500, function() { 
      $(this).removeClass('hidden'); 
      $me.addClass('hidden'); 
      titleSwap(); 
     }); 
    }); 
})(); 

Кроме того, если вы не хотите, чтобы включить скрытый класс на DIV в наценке вы может просто использовать $('.ref-title:nth-child(2)').addClass('hidden'); перед функцией titleSwap, чтобы добавить класс ко второму DIV.

Answer 2

легко, если вы положили ID на них, это возможно? проверить этот ответ jQuery fadeOut one div, fadeIn another on its place

$('#fadeout').fadeOut(300); 
$('#fadein').delay(2000).fadeIn(300); 

, если вы не можете добавить идентификаторы, попробуйте это. это предполагает, что они являются единственными элементами, под их непосредственного родителем

$('.ref-title:first-child').fadeOut(300); 
$('.ref-title:last-child').delay(2000).fadeIn(300); 

Answer 3

Если вы можете использовать только показать/скрыть вы можете попробовать, как это: show/hide Example

function toggleTitle() { 
    $('header > h2').delay(2000).toggle('fast', function() { 
    toggleTitle(); 
    }); 
} 

Если вы должны использовать FadeIn/FADEOUT его немного более сложным в связи с одновременным эффектом постепенного изменения между названиями ... это мое решение fadeIn/Out Example

function toggleTitle() { 
    var visible = $('header > h2:visible'); 
    var hidden = $('header > h2:hidden'); 

    visible.delay(2000).fadeToggle('fast', function() { 
    hidden.fadeToggle('fast'); 
    toggleTitle(); 
    }); 
}