jQuery geser ke kiri dan tunjukkan

Saya memperluas jQueryefek yang dipanggil slideRightShow()dan slideLeftHide()dengan beberapa fungsi yang bekerja sama dengan slideUp()dan slideDown()seperti yang terlihat di bawah ini. Namun, saya juga ingin menerapkan slideLeftShow()danslideRightHide() .

Saya tahu ada pustaka substansial yang menawarkan hal semacam ini (saya ingin menghindari penambahan kumpulan besar javascriptfile lainnya), tetapi adakah yang bisa memberikan contoh sederhana tentang bagaimana menerapkan salah satu slideLeftShow()atau slideRightHide()?

jQuery.fn.extend({
  slideRightShow: function() {
    return this.each(function() {
      jQuery(this).animate({width: 'show'});
    });
  },
  slideLeftHide: function() {
    return this.each(function() {
      jQuery(this).animate({width: 'hide'});
    });
  },
  slideRightHide: function() {
    return this.each(function() {
      ???
    });
  },
  slideLeftShow: function() {
    return this.each(function() {
      ???
    });
  }
});

Fungsi di atas slideRightShowmulai menampilkan gambar dari sisi kiri dan berlanjut ke sisi kanan. Saya mencari cara untuk melakukan hal yang sama tetapi mulai dari sisi kanan dan maju ke arah kiri . Terima kasih!

EDIT

Antarmuka jQuery memiliki sesuatu seperti yang saya butuhkan (pada dasarnya saya membutuhkan fungsi "geser ke kanan" dan "geser ke kiri"), tetapi saya tidak bisa membuatnya berfungsi dengan jQuery 1.3: http://interface.eyecon.ro/demos /ifx.html . Juga, demo mereka tampaknya rusak dan hanya akan melakukan slide satu kali sebelum menimbulkan jutaan kesalahan.

Fitur ini disertakan sebagai bagian dari jquery ui http://docs.jquery.com/UI/Effects/Slide jika Anda ingin memperluasnya dengan nama Anda sendiri, Anda dapat menggunakan ini.

jQuery.fn.extend({
  slideRightShow: function() {
    return this.each(function() {
        $(this).show('slide', {direction: 'right'}, 1000);
    });
  },
  slideLeftHide: function() {
    return this.each(function() {
      $(this).hide('slide', {direction: 'left'}, 1000);
    });
  },
  slideRightHide: function() {
    return this.each(function() {
      $(this).hide('slide', {direction: 'right'}, 1000);
    });
  },
  slideLeftShow: function() {
    return this.each(function() {
      $(this).show('slide', {direction: 'left'}, 1000);
    });
  }
});

Anda akan membutuhkan referensi berikut

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>

Jangan lupa padding dan margin ...

jQuery.fn.slideLeftHide = function(speed, callback) { 
  this.animate({ 
    width: "hide", 
    paddingLeft: "hide", 
    paddingRight: "hide", 
    marginLeft: "hide", 
    marginRight: "hide" 
  }, speed, callback);
}

jQuery.fn.slideLeftShow = function(speed, callback) { 
  this.animate({ 
    width: "show", 
    paddingLeft: "show", 
    paddingRight: "show", 
    marginLeft: "show", 
    marginRight: "show" 
  }, speed, callback);
}

Dengan argumen kecepatan / panggilan balik yang ditambahkan, ini adalah pengganti drop-in lengkap untuk slideUp()dan slideDown().

Anda dapat menambahkan fungsi baru ke perpustakaan jQuery Anda dengan menambahkan baris ini pada file skrip Anda sendiri dan Anda dapat dengan mudah menggunakan fadeSlideRight()dan fadeSlideLeft().

Catatan: Anda dapat mengubah lebar animasi sesuka Anda, misalnya 750px.

$.fn.fadeSlideRight = function(speed,fn) {
    return $(this).animate({
        'opacity' : 1,
        'width' : '750px'
    },speed || 400, function() {
        $.isFunction(fn) && fn.call(this);
    });
}

$.fn.fadeSlideLeft = function(speed,fn) {
    return $(this).animate({
        'opacity' : 0,
        'width' : '0px'
    },speed || 400,function() {
        $.isFunction(fn) && fn.call(this);
    });
}

Dan jika Anda ingin memvariasikan kecepatan dan menyertakan panggilan balik, cukup tambahkan seperti ini:

        jQuery.fn.extend({
            slideRightShow: function(speed,callback) {
                return this.each(function() {
                    $(this).show('slide', {direction: 'right'}, speed, callback);
                });
            },
            slideLeftHide: function(speed,callback) {
                return this.each(function() {
                    $(this).hide('slide', {direction: 'left'}, speed, callback);
                });
            },
            slideRightHide: function(speed,callback) {
                return this.each(function() {  
                    $(this).hide('slide', {direction: 'right'}, speed, callback);
                });
            },
            slideLeftShow: function(speed,callback) {
                return this.each(function() {
                    $(this).show('slide', {direction: 'left'}, speed, callback);
                });
            }
        });