fadein background image

[digitalbart]

Can a background css image be faded in using jQuery ... I tried putting

$(this).fadeIn("slow").css('background-image', 'url(EggA_' + eid + '.gif)'); and it did not work see code below, this flickers when you click on it

<a href="javascript:;" id="egg1" class="eggswap"></a>

$(function() {
    var arr = [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12" ];
    jQuery.each(arr, function() {
        var eid = this;        
        if (eid != 7) {
            $("#egg"+eid).one("click", function(evt) {
                $(this).css('background-image', 'url(EggA_' + eid + '.gif)');
                $(this).css('cursor','auto');
            });    
        } else {
             $("#egg"+eid).one("click", function(evt) {
                $(this).css('background-image', 'url(EggA_' + eid + '.gif)');
                $(this).attr("href", "http://urlgoeshere.com/");
                 return false;
            });    
          }
      });
});

[Raffles]

Wow, a classic WTF example of when an abstraction layer interferes and stops people from using much simpler code! I'm referring to this bit:

var arr = [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12" ];
    jQuery.each(arr, function() {
        var eid = this;       
        if (eid != 7) {

which should be using a for loop!

for (var i = 1; i < 13; i++) {
  if (i !== 7) {

Regarding the problem you've asked about, with the code you posted at the top, the problem is likely that the background image is being applied with every iteration of the fading process. Try it the other way round:

$(this).css('background-image', 'url(EggA_' + eid + '.gif)').fadeIn("slow");

Since it's being faded in, it shouldn't matter if it's applied before the fading begins.

[digitalbart]

Thanks for the ideas.

The fade needs to be applied when you click I am not sure where to put it then?

$("#egg"+eid).one("click", function(evt) {
                // $(this).css('background-image', 'url(EggA_' + eid + '.gif)');
                $(this).css('background-image', 'url(EggA_' + eid + '.gif)').fadeIn("slow");