So i'm trying to loop through two divs (with images and links in each). I have managed to fade in and out each div as I can see the images alternating however the links don't alternate. My html is as follows:
<div class="fade1"><a href="link1"><img class="banner1" src="images/Home_Banner_1.jpg"></a></div>
<div class="fade2"><a href="link2"><img class="banner2" src="images/Home_Banner_2.jpg"></a></div>
css:
.fade1 {opacity: 0;}
and my jquery
<script>
$(document).ready(function() {
function runIt () {
var fade1 = $(".fade1");
var fade2 = $(".fade2");
fade1.delay(5000).fadeTo(3000, 1).delay(5000).fadeTo(3000, 0);
fade2.delay(5000).fadeTo(3000, 0).delay(5000).fadeTo(3000, 1, runIt);
}
runIt();
});
</script>
Thanks in advance for any and all help!
Edit:
So building off of the answer below I added callbacks to fade1.fadeTo both as the image opacity is turned on and as its turned off so that the href would be updated with the images.
fade1.delay(5000).fadeTo(3000, 1, function(){swap.attr("href", link1)}).delay(5000).fadeTo(3000, 0, function(){swap.attr("href", link2)});
答案 0 :(得分:0)
Give the links classes and edit the href attribute with $('.yourlinkclass').attr('href','yournewURL');