append が反映されないで困っています。

Question

======================================
HTML

<div id="slidegallery">
<ul id="slide">
<li><img src="img/test_1.jpg"></li>
<li><img src="img/test_2.jpg"></li>
<li><img src="img/test_3.jpg"></li>
<li><img src="img/test_4.jpg"></li>
</ul>
</div>
<div id="slidenav">
<a href="#" class="next">次へ</a>
</div>
======================================
jQuery

var Slidegallery = $('#slidegallery');
   var SlideUl = $('#slide');
   function slideRight(){
      var firstLi = SlideUl.find('li:first');
      firstLi.animate({
        'opacity': '0',
      },1000,function(){
        firstLi.remove();
        SlideUl.append(firstLi);
      });
   }
$('.next').click(slideRight);
======================================
CSS

#slidegallery{
	width: 1000px;
	height: 500px;
	overflow: hidden;
	position: relative;
}
#slide{
	width: 2000px;
	position: relative;
}
#slide li{
	position: absolute;
	top:0;
	left:0;
	width: 500px;
}
======================================
```append されないです。
例えば以下のようなコードを書いて、クリックしたら次の写真が表示されるようにしたいのですが、4枚目が終わったら、
appendされません。
どこが間違っているのでしょうか。

Comments

[spookybird]

コードはコードブロックに入れてください。markdownのフォーマットと競合して崩壊しています。

Answer 1

        //firstLi.remove();
        SlideUl.append(firstLi);
        firstLi.css('opacity', '1'); // add.

Answer 2

appendしてうしろにまわすといったようなことをやりたいのかもしれませんが、スライドするならこういう実装じゃダメですかね？
表示する要素を切替えしてます。

var Slidegallery = $('#slidegallery');
var SlideUl = $('#slide');

SlideUl.children('li:first-child').addClass('visible');

function slideRight() {
  var visibleSlide = SlideUl.children('li.visible');
  var nextSlide = visibleSlide.next();
  if (!nextSlide.length) nextSlide = SlideUl.children('li:first-child');

	visibleSlide.animate({
  	opacity: 0
  }, {
  	duration: 1000,
    queue: false,
    complete: function () {
  	  visibleSlide.removeClass('visible');
      visibleSlide.css('opacity', '');
    }
  });

	nextSlide.css('opacity', 0);
  nextSlide.addClass('visible');
  nextSlide.animate({
  	opacity: 1
  }, {
  	duration: 1000,
    queue: false,
    complete: function() {
      nextSlide.css('opacity', '');
    }
  })
}

$('.next').click(slideRight);

#slide li{
    position: absolute;
    top:0;
    left:0;
    width: 500px;
    display: none;
}

#slide li.visible {
  display: list-item;
}

最初の回答でアニメーション忘れてたので、アニメーションでうっすら切り替わる感じに変えときました。
ただし「次へ」を連打されたときの考慮まではやってないので、早めに連打したらバグります。

Comments

[spookybird]

あ、アニメーションはさむの忘れてました。

Answer 3

z-indexの重ね順を操作するのを忘れていて、無事解決いたしました。
ありがとうございました。