Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

can i cycle through bg images in a div with jquery ?

  • 22-07-2008 04:33PM
    #1
    grahamor
    Registered Users, Registered Users 2 Posts: 872 ✭✭✭


    Hi,

    I have been using the jquery image cycle plugin alot recently but now i need to cycle through bg images instead of images inside a div.

    I am wondering has someone come across some easy jquery logic to cycle through bg images, i could change the css to change the image but how could i fade it ?

    Thanks for any info


Comments

  • #2
    forbairt
    Registered Users, Registered Users 2 Posts: 3,594 ✭✭✭forbairt


    what about having a div with a higher z-index which fades into a color ... in the mean time you replace your background image and ... the higher z-index color fades to transparent showing the new image ?


  • #3
    Liam Byrne
    Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne


    forbairt wrote: »
    what about having a div with a higher z-index which fades into a color ... in the mean time you replace your background image and ... the higher z-index color fades to transparent showing the new image ?

    Smoothest method:

    Have 2 overlapping divs, one with opacity 0.0 and one with opacity 1.0
    Load the background image for each, then fade one out using jQuery and fade the other in

    Repeat, alternating the target div between the two

    The other way is to do a simple jQuery fadeOut and fadeIn on a single div, so that the div fades to the colour of whatever is "behind" it (page background colour or other parent tag)


Advertisement