0

Below is the code that I am currently using to fade in 4 divs with a 2 second interval between each one. I am using this in a BXslider so as the slide slides into view the 4 divs will load. However although it is a very simple piece of coding. It does not fade in any of the divs, they are just there. Can somebody see what I am doing wrong?

Thanks

My Javascript

<script>
$(document).ready(function() {
$('#element1').delay(2000).fadeTo(0, 2000);
$('#element2').delay(4000).fadeTo(0, 2000);
$('#element3').delay(6000).fadeTo(0, 2000);
$('#element4').delay(8000).fadeTo(0, 2000);
});
</script>

My HTML

<ul class="bxslider">
<li style="background-image: url(images/slide1.png);"><div>
<div id="element1" style="margin:200px;">
  <h1 style="font-family: 'Lato', sans-serif; color: #FFF;">we are the cambridge graphic design company...</h1>
</div>
<div id="apDiv4"></div>
<div id="element2" style="margin:200px;">
  <div id="apDiv3"></div>
  <h2 style="font-family: 'Lato', sans-serif; color: #FFF; text-align: right; font-size: 16px;">we design brochures, catalogues, business cards, leaflets, cd covers and much much more. </h2>
</div>
</li> 
<li style="background-image: url(images/slide2.png);"><div>
<div id="div1" style="margin:200px;">
  <h1 style="font-family: 'Lato', sans-serif; color: #FFF;">...we are the cambridge website design company...</h1>
</div>
<div id="apDiv4"></div>
<div id="div2" style="margin:200px;">
  <div id="apDiv3"></div>
  <h2 style="font-family: 'Lato', sans-serif; color: #FFF; text-align: right; font-size: 16px;">offering bespoke, creative website design for small and large businesses of all types to help increase sales. </h2>
</div></li>
<li style="background-image: url(images/slide3.png);;"><div>
<div id="div1" style="margin:200px;">
  <h1 style="font-family: 'Lato', sans-serif; color: #FFF;">...we are the cambridge budget design company...</h1>
</div>
<div id="apDiv4"></div>
<div id="div2" style="margin:200px;">
  <div id="apDiv3"></div>
  <h2 style="font-family: 'Lato', sans-serif; color: #FFF; text-align: right; font-size: 16px;">offering budget & templated websites, business rebranding, start up business rebranding and much much more.</h2>
</div></li>
<li style="background-image: url(images/slide4.png);"><div>
<div id="div1" style="margin:200px;">
  <h1 style="font-family: 'Lato', sans-serif; color: #FFF;">...we are the cambridge advertising agency...</h1>
</div>
<div id="apDiv4"></div>
<div id="div2" style="margin:200px;">
  <div id="apDiv3"></div>
  <h2 style="font-family: 'Lato', sans-serif; color: #FFF; text-align: right; font-size: 16px;">we provide 6 month or 12 month advertising schedules as well as one off adverts for many, many businesses.</h2>
</div></li>
<li style="background-image: url(images/slide5.png);"><div>
<div id="div1" style="margin:200px;">
  <h1 style="font-family: 'Lato', sans-serif; color: #FFF;">...we are cambridge copy writers...</h1>
</div>
<div id="div2" style="margin:200px;">
  <h2 style="font-family: 'Lato', sans-serif; color: #FFF; text-align: right; font-size: 16px;">whether you have an article, a poem or a novel, we will review, edit or write it for you.</h2>

None of the answers so far have helped for some reason :(, I have also just tried this code below but nothing!

$(function() {  
$('#div1, #div2, #div3, #div4').each(function(i) {
    $(this).delay(i * 2000).fadeIn(1000);
});
});
DanielNolan
  • 721
  • 3
  • 10
  • 18
  • Fading uses CSS styling. Did you make sure the divs are hidden by default? – Kolja Oct 21 '14 at 21:52
  • Viewing that page's source, there are no elements with IDs `element1` to `element4` – kei Oct 21 '14 at 21:52
  • Hi @kei thanks, I do not mean to sound rude but there are... I just looked at them to double check lol :) thanks though – DanielNolan Oct 21 '14 at 21:55
  • @koljanep I was hoping that the above code was all I needed and I could achieve the effect just with the Javascript – DanielNolan Oct 21 '14 at 21:55
  • Nope, not rude at all! My bad I viewed source on a different tab! (: – kei Oct 21 '14 at 21:58
  • 1
    Seems, you have set the fadeTo-parameters wrong. See jquery API documentation: .fadeTo( duration, opacity [, complete ] ) http://api.jquery.com/fadeto/ – boulder_02 Oct 21 '14 at 21:59
  • It does look like that those IDs are getting stripped out in the generated HTML most likely because the bxslider code is modifying the DOM. – kei Oct 21 '14 at 22:01

3 Answers3

1

try this

http://fiddle.jshell.net/y5p6udau/

$(document).ready(function() {
$('#element1').delay(2000).fadeOut(2000);
$('#element2').delay(4000).fadeOut(2000);
$('#element3').delay(6000).fadeOut(2000);
$('#element4').delay(8000).fadeOut(2000);
});

anyway this is a very bad approach , i would use all back function to fire next fadeOut instead.

ProllyGeek
  • 15,517
  • 9
  • 53
  • 72
0

The syntax is fadeTo(duration, opacity), but you give the opacity as first argument. And if you want to fade in, your opacity should be 1 (or just use fadeIn() ).

Tim Jansen
  • 3,330
  • 2
  • 23
  • 28
0
<div id="slideshow">
 // wrap everything inside her
</div>

js

$(document).ready(function () {   
    SlideShow();
})

    function SlideShow() {
        $('#slideshow > div:gt(0)').hide();  
        setInterval(function () {
            $('#slideshow > div:first')
            .fadeOut(2000)
            .next()
            .fadeIn(2000)
            .end()
            .appendTo('#slideshow');
        }, 2000);
    }
user3811714
  • 286
  • 2
  • 8
  • 21
  • Yes you do.Also create the JS file separate and references within the html/aspx page – user3811714 Oct 22 '14 at 10:45
  • @DanielNolan checkout this example here http://jsfiddle.net/3v3wt9hb/ and this one http://jsfiddle.net/3v3wt9hb/2/ which ever one that will work for you – user3811714 Oct 22 '14 at 10:49
  • I give up! I have no idea why such a simple thing has caused so many problems... I did this before about 6 months ago in about 5 minutes haha – DanielNolan Oct 22 '14 at 11:29