Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript jQuery Toggle

  • This topic is empty.
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)
  • The forum ‘JavaScript’ is closed to new topics and replies.