Skip to main content

Forums

This topic contains 4 replies, has 3 voices, and was last updated by  smappdooda 4 years, 5 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #202517

    smappdooda
    Participant

    I want to fade the background image of one page to another when I click links. (I have three of them so it has to toggle back and forth) I found this code:

    $(document).ready(function() {
    $("#amber").click(function() {
        $(".about-bg").css({'background-image':'url(images/amber.jpg)'}); 
    })
    });
    

    And that got my background images to swap no problem. However, I want to be a bit fancy and have the images fade from one to another. So I altered it to this:

    $(document).ready(function() {
    $("#amber").click(function() {
        $(".about-bg").hide().css({'background-image':'url(images/amber.jpg)'}).fadeIn(500); 
    })
    });
    

    However, that causes the background images to just switch and my content fades in instead. The options I have found thus far seem to cause the same to occur.

    I have seen other options using CSS transitions but couldn’t get any of them to work. My knowledge of javascript and jquery is lacking. I tried to ask this on stack Overflow but they tend to be uppity jerks over there and were not helpful.

    Anyone have a suggestion?

    #202519

    smappdooda
    Participant

    After more searching (I’ve been at this for about 5 hours now) I found this which seems to do what I want.
    https://github.com/rewish/jquery-bgswitcher

    #202526

    Shikkediel
    Participant

    The problem is that there’s no such thing as background opacity (needed to animate a fade) so that script is just a ‘helper’ with the common workaround – creating multiple elements and alternately fading them (if I read the script correctly).

    #202568

    Chromawoods
    Participant

    Something like this? You need to pass a callback function for when the fade out function has finished. In my example, I toggle a couple of classes and then begin fading in.

    http://codepen.io/chromawoods/pen/dopbKa

    #202569

    smappdooda
    Participant

    That looks like that would work but I don’t want to unravel everything I have already done ha ha.

    You can see what I did/needed Here.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star