CODEWITHSUNDEEP
jqueryjquery-ui
user852610
user852610

Reputation: 2265

slide effect on content

Hi everyone I try to hide and show the content of my modal windows at the same time,

When I click in right bottom , I hide the current id, and show the next id.

This work fine, but I want ti do effect slide on this.

so this is my code when I click on bottom right

$('#right').live('click', function(){
    var total=$('.elemento').length;
    var siguiente= parseInt(actual) +1;
    if (siguiente <= total){
        AlaDerecha(sig);

    }
});

and 

function AlaDerecha(sig){
    previo = actual;
    actual = sig;
    $("[data-item ="+ previo + "]").hide("slide", { direction: "left" }, 1000);
    $("[data-item ="+ actual + "]").show("slide", { direction: "right" }, 1000);
}

if I erease (slide...) on AlaDerecha function like this

function AlaDerecha(sig){
    previo = actual;
    actual = sig;
    $("[data-item ="+ previo + "]").hide();
    $("[data-item ="+ actual + "]").show();
}

it work fine, hiden de current item and show the next, but If I put slide effect the current item move to left but no hidden and the next item don't show it.

Any idea!

thanks

Upvotes: 0

Views: 298

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

First thing, don't use .live(), as it is deprecated and produces unwanted results across browsers. Change the code this way:

$('body').on('click', '#right', function(){
    var total=$('.elemento').length;
    var siguiente= parseInt(actual) +1;
    if (siguiente <= total){
        AlaDerecha(sig);
    }
});

For the slide to work, use callback function.

function AlaDerecha(sig){
    previo = actual;
    actual = sig;
    $("[data-item ="+ previo + "]").hide("slide", { direction: "left" }, 1000, function(){
        $("[data-item ="+ actual + "]").show("slide", { direction: "right" }, 1000);
    });
}

Upvotes: 1

Related Questions