从图像数组动画过渡？

Question

我是 jQuery 的新手，我正在摆弄一个从数组加载图像并将结果发布到 div 的滑块。我设置它的方式是加载图像标签和图像源并将其放置到一个空的 div 中。现在，我所见过的与数组结合使用的任何 jQuery 动画的格式都大不相同。我应该提一下，我不是在寻找优雅的代码，而只是在寻找有效的代码。

基本上，是否可以将过渡与我现在的做法结合起来？如果是这样，怎么办？没什么花哨的，只是淡入淡出或滑动效果。

jsFiddle so far

 var imgArray = 
    ['<img src="http://placehold.it/400x300/cf5">',
    '<img src="http://placehold.it/400x300/555">', 
    '<img src="http://placehold.it/400x300/f0f">', 
    '<img src="http://placehold.it/400x300/05b">']

    counter = -1;

    $('#nextimage').click(function () {
    counter = (counter + 1) % imgArray.length; 
    console.log(imgArray[counter]); 
            document.getElementById("result1").innerHTML = (imgArray[counter]);
    });

    $('#previmage').click(function () {
    counter = (counter - 1); 
    console.log(imgArray[counter]); 
            document.getElementById("result1").innerHTML = (imgArray[counter]);
    });

html

  <div class="container">
    <div class="slider_wrapper">
      <div id="slider">
        <div class="img-wrap">
          <div id="result1"></div>
        </div>
      </div>
    </div>
  </div>
    <div id="footer">
        <a href="#" id="previmage"><img title="Previous Image" alt="prev image" src="https://dl.dropboxusercontent.com/u/65639888/image/prev.png"></a>
        <a href="#" id="nextimage"><img title="Next Image" alt="next image" src="https://dl.dropboxusercontent.com/u/65639888/image/next.png"></a>
    </div>

css

body {
    background-color:black;
}
.container{
    padding:5px;
    border:1px dashed black;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    background: black;  
}
.slider_wrapper{
    overflow:hidden;
    position:relative;
    max-width:100%;
    height:auto;
    top:auto;
    border-style: dashed;
    border-color: white;
}

#slider{
    position: relative;
    list-style: none;
    overflow: hidden;
    margin:0px;
    border-style: solid;
    border-color: green;
}
#slider img{
    width: 100%;
    height:auto;
    position: relative;
    float: left;
}
.nvgt{
    position:absolute;
    top: 0px;
    height: 100%;
    width: 50%;
    opacity: 0;
}

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: BLACK;
    line-height: 2;
    text-align: center;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 1px 0 #84BAFF;
    box-shadow: 0 0 15px #FFFFFF;
    opacity: 0.1;
    padding:0;
    margin:0;
}

#footer img {
    padding-top:10px;
    padding-bottom: 5px;
    padding-right:20px;
    padding-left:20px;
    height: 30px;
}

#footer:hover {
    opacity: 1;
}

ul, menu, dir, html, body {
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
    margin:0px;
}

Answer 1

诀窍是等到图像加载完毕。

var imgArray = 
    ['<img src="http://placehold.it/400x300/cf5">',
    '<img src="http://placehold.it/400x300/555">', 
    '<img src="http://placehold.it/400x300/f0f">', 
    '<img src="http://placehold.it/400x300/05b">']

counter = -1;

function imgTransition() {
    $('#result1').fadeOut(300, function() {
        $('#result1').html(imgArray[counter]);
        $('#result1 > img').on('load', function() {
            $('#result1').fadeIn(500);
        });
    });
};

$('#nextimage').click(function () {
    counter = (counter + 1) % imgArray.length; 
    console.log(imgArray[counter]);
    imgTransition();
});

$('#previmage').click(function () {
    counter = (counter - 1); 
    console.log(imgArray[counter]); 
    imgTransition();
});

JSFiddle

Answer 2

see jsfiddle

var imgArray =
    ['<img src="http://placehold.it/400x300/cf5">',
    '<img src="http://placehold.it/400x300/555">',
    '<img src="http://placehold.it/400x300/f0f">',
    '<img src="http://placehold.it/400x300/05b">'],

    counter = -1;
var animate = false;  //stopping invalid click during animation

function animatable() {
    $('#result1').slideUp(300, function() {
        $('#result1').html(imgArray[counter]);
        $('#result1 > img').on('load', function() {
            //$('#result1').fadeIn(500);
            $( '#result1' ).animate({
              height: "toggle"
            }, 1000 , function(){
                animate = false;
            });
        });
    });
};
function next(){
    if(!animate){
        animate = true;
    counter = (counter + 1) % imgArray.length;
    console.log(counter);
      $("#result1").fadeIn().html(imgArray[counter]);
    animatable();
    }
};

next();

$('#nextimage').click(next);

$('#previmage').click(function () {
    if(!animate){
        animate = true;
      if(counter=='0'){
        counter= imgArray.length;
      }
    counter = (counter - 1); 
    console.log(imgArray[counter]); 
      $("#result1").html(imgArray[counter]);
    animatable();
    }
});

update with animatable

Answer 3

上一个和下一个按钮使用淡出效果正常工作

var imgArray = ['<img src="http://placehold.it/400x300/cf5">',
            '<img src="http://placehold.it/400x300/555">',
            '<img src="http://placehold.it/400x300/f0f">',
            '<img src="http://placehold.it/400x300/05b">']

counter = -1;

function imgTransition() {
    $('#result1').fadeOut(300, function() {
        $('#result1').html(imgArray[counter]);
        $('#result1 > img').on('load', function() {
            $('#result1').fadeIn(500);
        });
    });
};

function next() {
    counter = (counter + 1) % imgArray.length;
    console.log(counter);
    imgTransition();
};

next();

$('#nextimage').click(next);

$('#previmage').click(function() {
    if (counter == '0') {
        counter = imgArray.length;
    }
    counter = (counter - 1);
    console.log(imgArray[counter]);
    imgTransition();
});

JSFIIDLE