- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › jQuery Toggle
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.
Hi Christopher
Here you have a version that will work as specified
http://jsfiddle.net/RKQNS/4/
@Latibro Great, Thank You!
Is there not a way to keep the markup as is in the first version for it to work?
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?
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 :-)
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.
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");
});