jQuery przesuń w lewo i pokaż

Rozszerzyłem jQuerywywoływane efekty slideRightShow()i slideLeftHide()kilka funkcji, które działają podobnie slideUp()i slideDown()jak widać poniżej. Chciałbym jednak również wdrożyć slideLeftShow()i slideRightHide().

Wiem, że istnieją istotne bibliotek, które oferują tego typu rzeczy (chciałbym uniknąć dodając kolejny duży zestaw javascriptplików), ale może ktoś zapewniają prosty przykład jak zaimplementować albo slideLeftShow()albo 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() {
      ???
    });
  }
});

Powyższa slideRightShowfunkcja rozpoczyna wyświetlanie obrazu od lewej strony i postępuje w kierunku prawej strony. Szukam sposobu, aby zrobić to samo, ale zacznij od prawej strony i posuwaj się w lewo . Dzięki!

EDYTOWAĆ

Interfejs jQuery ma coś takiego, czego potrzebuję (w zasadzie potrzebuję ich funkcji „przesuń w prawo” i „wysuń w lewo”), ale nie mogłem sprawić, by działało z jQuery 1.3: http://interface.eyecon.ro/demos /ifx.html . Ponadto ich wersja demonstracyjna wydaje się zepsuta, a slajd tylko raz, zanim wyrzuci milion błędów.

Ta funkcja jest częścią jquery ui http://docs.jquery.com/UI/Effects/Slide, jeśli chcesz ją rozszerzyć o własne nazwy, możesz jej uż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ędziesz potrzebować następujących referencji

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

Nie zapomnij o dopełnieniu i marginesach ...

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

Po dodaniu argumentów speed / callback jest to kompletny zamiennik slideUp()i slideDown().

Możesz dodać nową funkcję do swojej biblioteki jQuery, dodając te linie do własnego pliku skryptu i możesz łatwo używać fadeSlideRight()ifadeSlideLeft() .

Uwaga: możesz zmienić szerokość animacji, jak chcesz, wystąpienie 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);
    });
}

A jeśli chcesz zmieniać prędkość i uwzględniać wywołania zwrotne, po prostu dodaj je w ten sposób:

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