jQuery trượt sang trái và hiển thị

Tôi đã mở rộng các jQueryhiệu ứng được gọi slideRightShow()và slideLeftHide()với một số hàm hoạt động tương tự như slideUp()và slideDown()như được thấy bên dưới. Tuy nhiên, tôi cũng muốn thực hiện slideLeftShow()và slideRightHide().

Tôi biết có rất nhiều thư viện cung cấp loại điều này (tôi muốn tránh thêm một tập hợp lớn các javascripttệp khác), nhưng có ai có thể cung cấp một ví dụ đơn giản về cách triển khai slideLeftShow()hoặc slideRightHide()không?

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() {
      ???
    });
  }
});

Hàm trên slideRightShowbắt đầu hiển thị hình ảnh từ phía bên trái và nó tiến dần về phía bên phải. Tôi đang tìm cách nào đó để làm điều tương tự nhưng bắt đầu từ phía bên phải và tiến dần về phía bên trái . Cảm ơn!

BIÊN TẬP

Giao diện jQuery có một cái gì đó mà tôi cần (về cơ bản tôi cần các chức năng "trượt sang phải" và "trượt ra trái"), nhưng tôi không thể làm cho điều này hoạt động với jQuery 1.3: http://interface.eyecon.ro/demos /ifx.html . Ngoài ra, bản demo của họ dường như bị hỏng và nó sẽ chỉ thực hiện slide một lần trước khi ném một triệu lỗi.

Tính năng này được bao gồm như một phần của jquery ui http://docs.jquery.com/UI/Effects/Slide nếu bạn muốn mở rộng nó với tên riêng của mình, bạn có thể sử dụng tính năng này.

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

bạn sẽ cần các tài liệu tham khảo sau

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

Đừng quên phần đệm và lề ...

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

Với các đối số tốc độ / gọi lại được thêm vào, nó là một sự thay thế hoàn toàn cho slideUp()và slideDown().

Bạn có thể thêm chức năng mới vào thư viện jQuery của mình bằng cách thêm các dòng này vào tệp script của riêng bạn và bạn có thể dễ dàng sử dụng fadeSlideRight()và fadeSlideLeft().

Lưu ý: bạn có thể thay đổi chiều rộng của hoạt ảnh như bạn muốn, ví dụ 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);
    });
}

Và nếu bạn muốn thay đổi tốc độ và bao gồm các cuộc gọi lại, chỉ cần thêm chúng như sau:

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