Jump to content

Apply the same css function to child a divs child elements


son.of.the.morning

Recommended Posts

I am having a problem here i am trying to make a simple fade slider but the divs which am using have sub divs that want display.

 

HTML

    <div id="LoopArticles">
    	
        <div class="show">
            <div id="SliderHead">Yo Yo Yo</div>
            <div id="SliderBody">
            Random Random Random Random Random Random Random Random Random Random Random Random Random Random 
            Random Random Random Random Random Random Random Random Random Random Random Random Random Random 
            </div>
        </div>
        
        <div>
            <div id="SliderHead">Yo Yo Yo</div>
            <div id="SliderBody">
            Random Random Random Random Random Random Random Random Random Random Random Random Random Random 
            Random Random Random Random Random Random Random Random Random Random Random Random Random Random 
            </div>
        </div>
</div>

 

Jquery

<script type="text/javascript">
// JavaScript Document
$(document).ready(function() {		

//Execute the slideShow
slideShow();

});

function slideShow() {

//Set the opacity of all images to 0
$('#LoopArticles div').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('#LoopArticles div:first').css({opacity: 1.0});
//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval('gallery()',3000);

}

function gallery() {

//if no IMGs have the show class, grab the first image
var current = ($('#LoopArticles div.show')?  $('#LoopArticles div.show') : $('#LoopArticles div:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#LoopArticles div:first') :current.next()) : $('#LoopArticles div:first'));	

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);

//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');

}
</script>

 

any one have any ideas?

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.