CODEWITHSUNDEEP
jqueryjquery-animate
user1954300
user1954300

Reputation: 1

jQuery Animation fade in fade out

I have 12 slides with images. I want to use jQuery animations or fade in/fade out effect. Here's my code:

$('#Li4').click(function () {
  $('#bnrImg').fadein(1000);
  $('#chnlLogo').fadein(1000);
  $('#mainBanner').css('backgroundColor', '#FBB03E');
  $('#bnrImg').attr('src', 'images/cBanners/bnr_neuro.png');
  $('#chnlLogo').attr('src', 'images/images.png');
  $('#chnlLink').attr('href', 'http://link.tv');
  $('#bnrImg').fadeout(1000);
  $('#chnlLogo').fadeout(1000);
});
$('#Li5').click(function () {
  $('#bnrImg').fadein(1000);
  $('#chnlLogo').fadein(1000);
  $('#mainBanner').css('backgroundColor', '#DB7EB4');
  $('#bnrImg').attr('src', 'images/cBanners/bnr_diabetes.png');
  $('#chnlLogo').attr('src', 'images/image.png');
  $('#chnlLink').attr('href', 'http://link.com');
  $('#bnrImg').fadeout(1000);
  $('#chnlLogo').fadeout(1000);
});

But the problem is, when I click to #li5 from #li4, the #bnrImg and #chnlLogo do their animation or fade in/fade out after I click. I want to have the fade out effect after I click on a slide, then automatically fade in the images right after the slide changes. Thanks.

Upvotes: 0

Views: 4255

Answers (2)

naresh kumar
naresh kumar

Reputation: 2241

Ok. Jere is a complete example code. Just paste in to a web page and change all image paths:

HTML code:

<div id="galleryContainer">
  <div id="photoShow">
    <div class="current"><img src="assets/banner/banner_one.jpg" width="900" height="324" class="gallery" /></div>
    <div><img src="assets/banner/banner_two.jpg" width="900" height="324" class="gallery" /></div>
    <div><img src="assets/banner/banner_three.jpg" width="900" height="324" class="gallery" /></div>
    <div><img src="assets/banner/banner_four.jpg" width="900" height="324" class="gallery" /></div>
    <div><img src="assets/banner/banner_five.jpg" width="900" height="324" class="gallery" /></div>
    <div><img src="assets/banner/banner_six.jpg" width="900" height="324" class="gallery" /></div>
  </div>
</div>

CSS code:

#galleryContainer {
    width:900px;
    height:330px;
    margin:0 auto;
    position:relative;
    padding-bottom:10px;
}
#photoShow {
    position:relative;
    width:900px;
    height:324px;
    margin:0 auto;
}
#photoShow div {
    position:absolute;
    z-index: 0;
    margin-top:8px;
}
#photoShow div.previous {
    z-index: 1;
}
#photoShow div.current {
    z-index: 2;
}

And here is your jQuery code:

$(function() {
  setInterval("rotateImages()", 5000);
});
function rotateImages() {
  var curPhoto = $('#photoShow div.current');
  var nxtPhoto = curPhoto.next();
  if (nxtPhoto.length == 0)
    nxtPhoto = $('#photoShow div:first');
  curPhoto.removeClass('current').addClass('previous');
  nxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 2000,
    function() {
      curPhoto.removeClass('previous');
    });
  }
});

Upvotes: 2

Bas Slagter
Bas Slagter

Reputation: 9929

You probably want to take a look at the callback functions that are available for the fadein/out methods. Maybe in addition the stopPropagation and preventDefault methods can help you out.

Upvotes: 1

Related Questions