CODEWITHSUNDEEP
jquery
KDJ
KDJ

Reputation: 309

Change fade to slide

How can I change the fade to slide left/right?

 changeList = function () {

            listItems.eq(i).fadeOut(transition_speed, function () {
                i += 1;
                if (i === listLen) {
                    i = 0;
                }
                listItems.eq(i).fadeIn(transition_speed);
            });

        };

I've found a code; however, don't know how to implement because the first part (fade out) has a function attached.

.show( "slide", {direction: "left" }, 2000 );

and then

.hide( "slide", {direction: "left" }, 2000 );

is that the best way to achieve this, or is there a better way?

------EDIT------

        changeList = function () {

            listItems.eq(i).hide({
    easing : "slide",
    direction: "left",
    duration : 2000,
    complete: function(){
        i += 1;
                if (i === listLen) {
                    i = 0;
                }
                listItems.eq(i).show({
    easing : "slide",
    direction: "left",
    duration : 2000 });
    }
            });
};

This edit didn't work. I probably implemented it wrong

Upvotes: 1

Views: 66

Answers (2)

sarin surendran
sarin surendran

Reputation: 303

use this toggling effect 

$("#left_panel").toggle("slide", { direction: "left" }, 1000);

i have edited.

$('a.view-list-item').click(function () {
    var divname= this.name;
    $("#"+divname).show("slide", { direction: "left" }, 1000);
    $("#"+divname).parent().siblings(":visible").hide("slide", { direction: "left" }, 1000);
});

Upvotes: 0

Shahen Kosyan
Shahen Kosyan

Reputation: 124

You can do it without jQuery UI.

use .animate({ width: property }, 2000);

property:

  • 0 - to hide
  • 200px - to show with size 200px
  • 'toggle' - to toggle

Reference: jQuery API Animate

Upvotes: 1

Related Questions