Как показать div после исчезновения? - PullRequest
Новая
       7

Как показать div после исчезновения?

0 голосов
/ 24 февраля 2012

У меня есть этот код JQuery для перемещения между изображениями путем постепенного исчезновения текущего изображения и постепенного исчезновения следующего.но когда он достигнет последнего.он возвращается к первому и постепенно исчезает. 

var size = $("#place-gallery1 li").size();
//   alert(size);
$("ul#place-gallery1 li").click(function(){
    $(this).fadeOut(500,function(){
        var nextId= parseInt($(this).attr("id"))+1;
        if (nextId>size) nextId=1;
        alert(nextId);
        $("ul#place-gallery1 li#"+nextId).fadeIn(600);
    });             
});

html: 

<ul class="place-gallery" id="place-gallery1">
    <li id="1" class="show-img"><img src="images/img1.jpg" width="237px" height="237px"/></li>
    "<li id="2" class="hide-img"><img src="images/img2.jpg" width="237px" height="237px" /></li>
    "<li id="3" class="hide-img"><img src="images/img3.jpg" width="237px" height="237px" /></li>
    "<li id="4" class="hide-img"><img src="images/img4.jpg" width="237px" height="237px" /></li>
</ul>

, но когда он достиг финального уровня, он не вернулся к первому каккод должен сделать

Ответы [ 2 ]

0 голосов
/ 24 февраля 2012 
$("#place-gallery1 li").on('click', function(){
    $(this).fadeOut(500, function(){
        var next = $(this).next('li');
        if (!next.length) { next = $("#place-gallery1 li:first"); }
        next.fadeIn(600);
    });             
});​

FIDDLE

0 голосов
/ 24 февраля 2012

Это пример изображений, вращающихся каждые 5 секунд: 

function changeImages() {
  var active_event = $("#place-gallery1 li:visible");
  var next_event = active_event.next();
  if(next_event.size() == 0) next_event = $("#place-gallery1 li:first");
  active_event.fadeOut(500);
  next_event.fadeIn(500);
}

setInterval("changeImages()", 5000);

Если вы хотите изменить изображения на Click, просто удалите setInterval и вызовите функцию changeImages () напрямую.

...