javascript - easeInOutQuad with a fade in -

i have searched couple hours , cant seem find correct solution this. need fade in background image after loaded. loading , fadein() works code have pasted choppy. want use easeinoutquad fadein() see if smoother. (the reason choppy because there other script @ work doing other things @ same time).i tried this:

$(".wings-wrapper").fadein(2000, 'easeinoutquad', function(){}); 

but did not work .

var backgroundimage = $(currentwing).data("background-url");          var bgimage = new image();          bgimage.src = backgroundimage;                 $(bgimage).load(function(){              $(".wings-wrapper").css("background-image","url("+$(this).attr("src")+")").fadein(1000);          }); 

it seems looking load image fade-in effect.

you may either javascript or css

javascript:

simply hide image once loaded , use fadein() make appear again fade effect.

$(".jsfade").hide(0).delay(500).fadein(3000)

where .jsfade class attached image

css:

you can use css animations change opacity of image create fadein effect. image .fade class,

  <img src="image.jpg" class="fade" /> 

you can define css classes follows

.fade {     opacity: 1;     animation: fadein 2s;     -moz-animation: fadein 2s; /* firefox */     -webkit-animation: fadein 2s; /* safari , chrome */     -o-animation: fadein 2s; /* opera */ }   @keyframes fadein {     {         opacity:0;     }     {         opacity:1;     } } @-moz-keyframes fadein { /* firefox */     {         opacity:0;     }     {         opacity:1;     } } @-webkit-keyframes fadein { /* safari , chrome */     {         opacity:0;     }     {         opacity:1;     } } @-o-keyframes fadein { /* opera */     {         opacity:0;     }     {         opacity: 1;     } }  .fade:hover {   opacity: 0.5;   } 

update:

jquery ui specifies following signature show/hide/fadein functions

.show( [duration,] [easing,] [callback] ) 

having said that, following code different easing options

 $(".jsfade").fadein(3000, 'linear')  //with linear easing option  $(".jsfadeeaseinoutquad").fadein(3000,'easeinoutquad') //with easeinoutquad easing option. 

so, reason why $(".wings-wrapper").fadein(2000, 'easeinoutquad', function(){}); doesnt seem work because content visible , hence fadein() nothing. see effect, you need hide elements first , apply fadein().

use css property display:none hide .wings-wrapper

here's updated plunkr both approaches.