动画从图像数组转换？

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); 
     }); 
    }); 
}; 

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

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); 
     }); 
    }); 
}; 

$('#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