Skip to main content

Forums

This topic contains 6 replies, has 0 voices, and was last updated by  chrisburton 7 years, 11 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #33603

    chrisburton
    Participant

    http://jsfiddle.net/RKQNS/

    Forgive me as I brutally suck at jQuery. Above I have linked to a description of what I’d like. Basically when one anchor tag is clicked, it fades to that option and hides the other.
    I need .slider1 to be visible by default.

    #83805

    Latibro
    Member

    Hi Christopher
    Here you have a version that will work as specified
    http://jsfiddle.net/RKQNS/4/

    #83806

    chrisburton
    Participant

    @Latibro Great, Thank You!

    Is there not a way to keep the markup as is in the first version for it to work?

    #83807

    Latibro
    Member

    You might, but I added a div around the two img in order to place them above each other, or else they would not fade in/out above each other. Because they are both visible in the markup when they are in the face progress, and you would see the 2 images fading and when first when they are done fading the now visible image would move the the correct location.
    You could ofcourse add the same absolute position to both images or something else, but here my knowleage of CSS lacks. Maybe you have some ideas of solving the problem you self?

    #83808

    Latibro
    Member

    And off cause the jQuery code could be made nicer with a function with the almost identical code. But this would do the job, then I leave you with making it pretty :-)

    #83809

    chrisburton
    Participant

    I appreciate you taking the time out to do that. I’ll try to dabble into it although my jQuery is terrible. The initial markup is essential at this point.

    #83810

    chrisburton
    Participant

    Fix: http://jsfiddle.net/ZAPwD/

    $(".slider2").hide();

    $("a.slider").click(function() {
    $(".slider2").fadeIn("slow", "linear");
    $(".slider1").fadeOut("slow", "linear");
    });
    $("a.fader").click(function () {
    $(".slider1").fadeIn("slow", "linear");
    $(".slider2").fadeOut("slow", "linear");
    });
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

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