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?

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.