CODEWITHSUNDEEP
jquery
PixelMuse
PixelMuse

Reputation: 470

jQuery slider not behaving as expected

Would someone mind taking a look and explaining what I did wrong here?

The arrow is flipping on me and it takes 2 clicks to make it work correctly.

Is there a better way of doing this?

Thanks.

Please see this link: http://jsfiddle.net/ddub/j3Dfr/

Upvotes: 0

Views: 89

Answers (3)

mschr
mschr

Reputation: 8641

Simple; check for is(":hidden") returns wrong value as it has not yet been hidden - its just not visible due to the negative overflow. add

 $("#openCloseIdentifier").hide();

Upvotes: 0

Tamara Wijsman
Tamara Wijsman

Reputation: 12348

Your initial state doesn't match the hidden state; fixing that, it works.

$(document).ready(function () {
    $("#openCloseIdentifier").hide();
    $("#topMenuImage").html('<img src="https://lh5.googleusercontent.com/-Xgkkkl6QmoM/T6MFfAqNwWI/AAAAAAAACNA/Ghf_F21rz0E/w208-h208-n-k/arrow-down.png"  height="50px" width="50px"alt="close" />');

    // Your original code...
}

You might want to consider to define a string variable with the '<img ...>' part in advance...

Upvotes: 0

Bryan
Bryan

Reputation: 6752

You currently have the code below...

// sliding load board search option
$(document).ready(function () {
    $(".topMenuAction").click(function () {
        if ($("#openCloseIdentifier").is(":hidden")) {

                $("#slider").animate({
                    marginTop: "-55px"  //adjust as needed
                }, 390);


            $("#topMenuImage").html('<img src="https://lh5.googleusercontent.com/-4P1KGHJcd7w/T6MFfHRttBI/AAAAAAAACNA/JgwzfhkIrAs/w208-h208-n-k/arrow-up.png"  height="50px" width="50px" alt="open" />');
            $("#openCloseIdentifier").show();
        } else {
            $("#slider").animate({
                marginTop: "24px"
            }, 350);
            $("#topMenuImage").html('<img src="https://lh5.googleusercontent.com/-Xgkkkl6QmoM/T6MFfAqNwWI/AAAAAAAACNA/Ghf_F21rz0E/w208-h208-n-k/arrow-down.png"  height="50px" width="50px"alt="close" />');
            $("#openCloseIdentifier").hide();
        }
    });
});​

The primary problem, is that your marginTop animation is just backwards. IF you make the first one 24px instead of -55px, and then the second -55px instead of 24px, like the code below, it should behave the way you're expecting it to!

// sliding load board search option
$(document).ready(function () {
    $(".topMenuAction").click(function () {
        if ($("#openCloseIdentifier").is(":hidden")) {

                $("#slider").animate({
                    marginTop: "-55px"  // Changed this to -55px
                }, 390);


            $("#topMenuImage").html('<img src="https://lh5.googleusercontent.com/-4P1KGHJcd7w/T6MFfHRttBI/AAAAAAAACNA/JgwzfhkIrAs/w208-h208-n-k/arrow-up.png"  height="50px" width="50px" alt="open" />');
            $("#openCloseIdentifier").show();
        } else {
            $("#slider").animate({
                marginTop: "24px" // Changed this to 24px
            }, 350);
            $("#topMenuImage").html('<img src="https://lh5.googleusercontent.com/-Xgkkkl6QmoM/T6MFfAqNwWI/AAAAAAAACNA/Ghf_F21rz0E/w208-h208-n-k/arrow-down.png"  height="50px" width="50px"alt="close" />');
            $("#openCloseIdentifier").hide();
        }
    });
});​

Upvotes: 1

Related Questions