CODEWITHSUNDEEP
jqueryjquery-ui
Dustin Silk
Dustin Silk

Reputation: 4600

jquery ui Show / hide stops working after 2 toggles

I have an image - that when clicked it shows two children divs then hides them when the mouse leaves.

this only works twice in a row then stops doing anything on click.

$('.art').click(function(){
    var $this = $(this)

    $this.children('.details').children('div').eq(1).show("slide", {direction: "left", easing: "easeOutQuad"}, 200);
    $this.children('.details').children('div').eq(0).show("slide", {direction: "right", easing: "easeOutQuad"}, 200);

    $this.bind("mouseleave", function(){
        $this.children('.details').children('div').eq(0).hide("slide", {direction: "left", easing: "easeOutQuad"}, 200);
        $this.children('.details').children('div').eq(1).hide("slide", {direction: "right", easing: "easeOutQuad"}, 200);
    })
});

Upvotes: 0

Views: 103

Answers (1)

Mister Epic
Mister Epic

Reputation: 16723

You're binding to mouseleave each and every time you click on an element with a .art class. Can you tell me if this improves things:

$('.art').click(function(){
    var $this = $(this);

    $this.children('.details').children('div').eq(1).show("slide", {direction: "left", easing: "easeOutQuad"}, 200);
    $this.children('.details').children('div').eq(0).show("slide", {direction: "right", easing: "easeOutQuad"}, 200);
});

$('.art').mouseleave(function(){
    var $this = $(this)
    $this.children('.details').children('div').eq(0).hide("slide", {direction: "left", easing: "easeOutQuad"}, 200);
    $this.children('.details').children('div').eq(1).hide("slide", {direction: "right", easing: "easeOutQuad"}, 200);
    })

Upvotes: 1

Related Questions