Fade in and out of div elements upon clicking on an # anchor

Question

Fade in and out of div elements upon clicking on an # anchor

I have been attempting to create a function where different divs fade in and out when clicking on an image with an <a href>. Unfortunately, I have not been successful in getting it to work despite several attempts. Here is the code that I am using:

$(document).ready(function () {
    $("input[type='checkbox']").change(function () {
        var state = $(this).val();
        $("#" + state).toggleClass("overlay");
    });

    $('#triggerButton').click(function (e) {
        e.preventDefault();
        $('#firstscreen').fadeOut('fast', function () {
            $('#casualshirt').fadeIn('fast');
        });
    });
});

//CSS code here...

//HTML code here...

I have thoroughly researched this issue but have not been able to find a solution.

UPDATE: I did include a Fiddle link but it seems to have been removed. You can access the fiddle here.

UPDATE: Updated Fiddle with fixes for the id.

javascript jquery html css

Answer 1

Answer №1

To prevent issues, make sure to remove the trigger click function from the document load event. This is necessary because you have included the jQuery library within the body element.

Additionally, you can create a flashing effect by fading out and then fading in the parent div element of the target.

$(document).on('click', '#triggerButton', function(e) {
    e.preventDefault();
    $('#firstscreen').fadeOut('fast', function () {
        $(e.toElement.parentElement).fadeOut().delay(200).fadeIn();
    });
});

Test it out on this fiddle: http://jsfiddle.net/aLrf1cLz/4/

UPDATE 1:

CSS:

#casualshirt {
    top: 100px;
    width: 384px;
    height: 609px;
    background: url('http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/casualtop.png') no-repeat;
    position: absolute;
    display: none;
    z-index: 123123;
}

JS:

$(document).on('click', '#triggerButton', function(e) {
    e.preventDefault();
    $('#firstscreen').fadeOut('fast', function () {
        $(e.toElement.parentElement).fadeOut();
        $('#casualshirt').fadeIn()
    });
});

Fiddle: http://jsfiddle.net/aLrf1cLz/8/

Answer 2

To prevent issues, make sure to remove the trigger click function from the document load event. This is necessary because you have included the jQuery library within the body element.

Additionally, you can create a flashing effect by fading out and then fading in the parent div element of the target.

$(document).on('click', '#triggerButton', function(e) {
    e.preventDefault();
    $('#firstscreen').fadeOut('fast', function () {
        $(e.toElement.parentElement).fadeOut().delay(200).fadeIn();
    });
});

Test it out on this fiddle: http://jsfiddle.net/aLrf1cLz/4/

UPDATE 1:

CSS:

#casualshirt {
    top: 100px;
    width: 384px;
    height: 609px;
    background: url('http://preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/images/casualtop.png') no-repeat;
    position: absolute;
    display: none;
    z-index: 123123;
}

JS:

$(document).on('click', '#triggerButton', function(e) {
    e.preventDefault();
    $('#firstscreen').fadeOut('fast', function () {
        $(e.toElement.parentElement).fadeOut();
        $('#casualshirt').fadeIn()
    });
});

Fiddle: http://jsfiddle.net/aLrf1cLz/8/

Fade in and out of div elements upon clicking on an # anchor

Answer №1

Similar questions

What is the best way to stack a canvas box on top of another canvas box?

Can a ListItem attribute be generated?

"Efficiently fetching and handling multiple rows with

How to retrieve scope variable within the <script> element

When passing an object to a function inside a promise.then, Typescript may generate an error indicating that the object could

Step-by-step guide to creating a dynamic button that not only changes its value but also

What is the best way to protect old documents when selecting new files in a multi-file uploader?

Can Vuex mapActions be utilized within a module that is exported?

Looking for assistance in streamlining JavaScript for loops?

What is the reason for utilizing the object name in the object's method rather than using "this"?

"Troubleshooting why the jQuery Click Function is malfunctioning specifically in

What are the best practices for using .toString() safely?

Failed CSS login form

The value of the progress bar in Bootstrap Vue cannot be retrieved using a function

Tips for applying a CSS wrapper to an element, not just text

Make sure to incorporate the Readme.md file into your HTML document

What is the best way to create a triangle-shaped div using CSS styling?

Repetitive use of multiple submit buttons in AngularJS

Send binary information using Prototype Ajax request

Using CSS to style the last paragraph after a heading