jQuery geser ke kiri dan tunjukkan


111

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.


Saya memperbarui posting saya Saya harap ini membantu
bendewey

Jawaban:


185

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>

Hai! Saya mencari kebalikan dari apa yang telah Anda terapkan di sana. Pada dasarnya, ketika saya menggunakan apa yang saya miliki di atas untuk menunjukkan sebuah elemen, bagian kiri muncul pertama dan maju ke kanan. Saya mencoba memulainya dari sisi kanan dan maju ke arah kiri.
Wickethewok

1
ini berfungsi jika Anda mengapung elemen dengan benar. Jika tidak. Anda mungkin ingin menganimasikan properti kiri dan memindahkan elemen saat Anda menyusutkannya.
bendewey

1
Mengubah elemen menjadi float "benar" tidak membalikkan slide saya. Saya klarifikasi di atas jika itu membantu.
Wickethewok

2
Terima kasih banyak! Saya tidak tahu ini adalah bagian dari efek jQuery. Saya akan memberikan +2 jika saya bisa!
Wickethewok


34

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().


Bagaimana cara membuatnya melakukan efek yang sama dengan perosotan kanan?
Jayant Varshney

@JayantVarshney: pastikan blok tersebut rata kanan, mungkin dengan beberapa blok dalam. Kode ini hanya memperkecil lebar. Jika CSS Anda dapat mengatasinya, Anda akan memiliki slide yang tepat
vdboor

Terima kasih ... Tapi saya ingin kedua efek pada div yang sama .. seperti membuka dari kanan ke kiri dan kemudian menutup dari kiri ke kanan atau sebaliknya ...
Jayant Varshney

Kalau begitu, bagaimana kalau berpindah kelas pada callback penyelesaian? :-)
vdboor

Terima kasih, saya menggunakan animasi CSS3 untuk mencapai fungsi ini
Jayant Varshney

9

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);
    });
}

1
Inilah yang saya butuhkan tanpa menyertakan jQuery UI. Baru saja menambahkan opacity dan width sebagai parameter. ... = function(opacity, speed, width, fn) {...}
Dylan Valade

1
Ini adalah solusi terbaik sejauh ini. Tidak perlu menambahkan lebih banyak perpustakaan. Terima kasih.
hosseio

5

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);
                });
            }
        });
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.