end javascript after function?

Question

I'm getting a problem with my javasctipt. basically it's set up to hide two div layers that fade in after each other each time the user presses a button.

So if they press it once, div layer 1 hides and div layer 2 fades in. if they press it again, div layer 2 hides and layer 3 fades in.

It's working fine, but if the user presses the button a third time all the divs sort of spew out on top of each other and all unhide. Can i stop this from happening?

I'm a javascript beginner and don't know alot so if someone could please show me that would help. thanks.

<script>
$(".modcontentnewestmore").hide();
$(".modcontentnewestmore2").hide();
$('.morebutton').click(function () {
    if ($('.modcontentnewestmore').is(":hidden")) {
         $(".modcontentnewestfirst").fadeOut(500);
         $('.modcontentnewestmore').delay(700).fadeIn(500);

    } else {

        $('.modcontentnewestmore').fadeOut(500);
              $('.modcontentnewestmore2').delay(700).fadeIn(500);



    }


  });


</script>

Would it be possible to make a jsFiddle that reproduces the problem? — Ry-
– Ry- ♦, Commented Dec 24, 2012 at 4:52

ATOzTOA · Accepted Answer · 2012-12-24 04:56:40Z

1

Try this:

<script>
    $(".modcontentnewestmore").hide();
    $(".modcontentnewestmore2").hide();

    $('.morebutton').click(function () {
        if ($('.modcontentnewestfirst').is(":visible")) {
             $(".modcontentnewestfirst").fadeOut(500);
             $('.modcontentnewestmore').delay(700).fadeIn(500);

        } else if ($('.modcontentnewestmore').is(":visible")) {
            $('.modcontentnewestmore').fadeOut(500);
            $('.modcontentnewestmore2').delay(700).fadeIn(500);

        } else {
            $('.modcontentnewestmore2').fadeOut(500);
            $('.modcontentnewestfirst').delay(700).fadeIn(500);
        }
    });
</script>

answered Dec 24, 2012 at 4:56

ATOzTOA

36.1k23 gold badges101 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hunter Larco · Accepted Answer · 2012-12-24 05:11:02Z

As a word of advice, you can accomplish this in just css and html quite easily and save yourself from any trouble shooting in browsers with javascript blocked.

<style type='text/css'>
div.div1{
    position:absolute;
    width:100px;
    height:100px;
    background:rgb(240,240,240);
    border:1px solid rgb(220,220,220);
    transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -webkit-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    opacity:0;
}
div.div2{
    position:absolute;
    width:100px;
    height:100px;
    background:rgb(240,240,240);
    border:1px solid rgb(220,220,220);
    transition:all 500ms 700ms ease;
    -moz-transition:all 500ms 700ms ease;
    -webkit-transition:all 500ms 700ms ease;
    -o-transition:all 500ms 700ms ease;
}
input.button:checked~div div.div1{
    opacity:1;
    transition:all 500ms 700ms ease;
    -moz-transition:all 500ms 700ms ease;
    -webkit-transition:all 500ms 700ms ease;
    -o-transition:all 500ms 700ms ease;
}
input.button:checked~div div.div2{
    opacity:0;
    transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -webkit-transition:all 500ms ease;
    -o-transition:all 500ms ease;
}
</style>
<input class='button' type='checkbox'/>
<div>
    <div class='div1'>
        div 1
    </div>
    <div class='div2'>
        div 2
    </div>
</div>

zb' · Accepted Answer · 2012-12-24 05:23:57Z

Setup parent div (modcontent class in my sample), then just switch them based on visible element:

HTML:

<div class="modcontent">
  <div class="modcontentnewestfirst">modcontentnewestfirst</div>
  <div class="modcontentnewestmore">modcontentnewestmore</div>
  <div class="modcontentnewestmore2">modcontentnewestmore2</div>
</div>
<button class="morebutton">morebutton</button>

JS:

var modcontent = $('.modcontent');
modcontent.children().hide().first().show();
$('.morebutton').click(function() {
    var current = modcontent.children(':visible');
    var next = current.next()
    if (next.length === 0) next=modcontent.children().first();
    current.stop().fadeOut(500);
    next.stop().hide().delay(700).fadeIn(500);
});

DEMO

Collectives™ on Stack Overflow

end javascript after function?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related