jQuery เลื่อนไปทางซ้ายและแสดง

ผมขยายjQueryผลกระทบที่เรียกว่าslideRightShow()และslideLeftHide()มีฟังก์ชั่นคู่ว่าการทำงานคล้ายกับslideUp()และslideDown()เท่าที่เห็นด้านล่าง แต่ผมยังต้องการที่จะดำเนินการและ slideLeftShow()slideRightHide()

ฉันรู้ว่ามีไลบรารีจำนวนมากที่นำเสนอสิ่งประเภทนี้ (ฉันต้องการหลีกเลี่ยงการเพิ่มjavascriptไฟล์ขนาดใหญ่อื่น) แต่ใครก็ได้ช่วยยกตัวอย่างง่ายๆในการใช้งานอย่างใดอย่างหนึ่งslideLeftShow()หรือ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() {
      ???
    });
  }
});

slideRightShowฟังก์ชั่นด้านบนจะเริ่มแสดงภาพจากด้านซ้ายและเลื่อนไปทางด้านขวา ฉันกำลังมองหาวิธีที่จะทำในสิ่งเดียวกัน แต่เริ่มต้นจากด้านขวาและมีความคืบหน้าไปทางซ้ายบาง ขอบคุณ!

แก้ไข

jQuery Interface มีบางอย่างที่ฉันต้องการ (โดยพื้นฐานแล้วฉันต้องการฟังก์ชั่น "slide in right" และ "slide out left") แต่ฉันไม่สามารถใช้งานกับ jQuery 1.3: http://interface.eyecon.ro/demos /ifx.html . นอกจากนี้การสาธิตของพวกเขาดูเหมือนจะเสียและจะทำสไลด์เพียงครั้งเดียวก่อนที่จะโยนข้อผิดพลาดเป็นล้านครั้ง

คุณลักษณะนี้รวมเป็นส่วนหนึ่งของ jquery ui http://docs.jquery.com/UI/Effects/Slideหากคุณต้องการขยายด้วยชื่อของคุณเองคุณสามารถใช้สิ่งนี้ได้

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

คุณจะต้องมีการอ้างอิงต่อไปนี้

<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>

อย่าลืมช่องว่างภายในและระยะขอบ ...

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

ด้วยความเร็ว / ข้อโต้แย้งการเรียกกลับเพิ่มก็ลดลงในสมบูรณ์แทนและslideUp()slideDown()

คุณสามารถเพิ่มฟังก์ชั่นใหม่ที่จะห้องสมุด jQuery คุณโดยการเพิ่มบรรทัดเหล่านี้บนแฟ้มสคริปต์ของคุณเองและคุณสามารถใช้ได้อย่างง่ายดายและfadeSlideRight()fadeSlideLeft()

หมายเหตุ: คุณสามารถเปลี่ยนความกว้างของภาพเคลื่อนไหวได้ตามต้องการเช่น 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);
    });
}

และหากคุณต้องการปรับความเร็วให้แตกต่างกันและรวมการโทรกลับเพียงเพิ่มพวกเขาดังนี้:

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