How to add fade effect to jquery css background image

Question

$('#mob-display-feature').css("background-image",'url('+"./images/large/1.jpg"+')');

Please let me know how I can add fade effect to above jquery code. thanks

http://stackoverflow.com/questions/7319552/can-i-fade-in-a-background-image-css-background-image-with-jquery — Anandh Sp, Feb 29 '16 at 05:52

score 1 · Answer 1 · edited Feb 29 '16 at 07:46

1

Please refer the below link to know more: http://api.jquery.com/fadein/

edited Feb 29 '16 at 07:46

GibboK

71,848
143
435
658

answered Feb 29 '16 at 06:15

Shajeer Puzhakkal

141
3
13

score 0 · Answer 2 · edited Feb 29 '16 at 07:47

Try this code. Just copy, paste and try it. Hope this will help to you.

<!DOCTYPE html>
<html>
<head>
 <title>fade effect</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
 <style type="text/css">
  body{
   margin: 0;
  }

  div.myimage{
   width: 500px;
   height: 400px;
   box-shadow: 1px 2px 1px black;
   border:1px solid black;
   
  }

  div.imge{
   width: 100%;
   height: 100%;
   background-image: url(http://zelcs.com/wp-content/uploads/2013/02/stackoverflow-logo-dumpster.jpg);
   background-repeat: no-repeat;
   background-size: contain;
   display: none;
  }
 </style>
<body>

 <div class="myimage"><div class="imge"></div></div>
  
<script type="text/javascript">
 $(document).ready(function(){
  $(".myimage").mouseenter(function(){
   $(".imge").fadeIn(1000);
  });
 });

 $(document).ready(function(){
  $(".myimage").mouseleave(function(){
   $(".imge").fadeOut(1000);
  });
 });
</script>


</body>
</html>

GibboK · Answer 3 · 2016-02-29T07:34:08.837

You can use jQuery fadeout or fadein after having added your CSS background-image property.

You can add additional code in the callback function for those effects (marked in the example with // animation complete.) this will allow you execute your code after animation ends.

I would suggest you to keep background-image directly in CSS and remove jQuery CSS code, if you have no reasons to add this property dynamically with JS.

#mob-display-featurey {
    background-image: url("url(http://lorempixel.com/400/200");
}

Example:

// background-imag 
$('#mob-display-feature').css("background-image", "url(http://lorempixel.com/400/200/)");

// on click start animation fadeout
$("#btn").click(function() {
  $("#mob-display-feature").fadeOut("slow", function() {
    // animation complete.
  });
});

#mob-display-feature {
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mob-display-feature">mob-display-feature</div>
<button id="btn" type="button">Click Me!</button>

score 0 · Answer 4 · answered Feb 29 '16 at 09:03

If you want fadeIn effect when displaying image dynamically.

HTML:

<div id="image-holder">

</div>

CSS:

#image-holder
{
  background-repeat:no-repeat;
  width:100%;
  height:500px;
  display:none;
}

JS:

$('#image-holder').css('background-image','url(http://images.freeimages.com/images/previews/859/sunset-1378816.jpg)').fadeIn("slow");

How to add fade effect to jquery css background image

4 Answers4