jQuery przesuń w lewo i pokaż

111

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.

Wickethewok
źródło
Zaktualizowałem swój post Mam nadzieję, że to pomoże
bendewey

Odpowiedzi:

185

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>
Bendewey
źródło
Cześć! Szukam odwrotności tego, co tam zaimplementowałeś. Zasadniczo, kiedy używam tego, co mam powyżej, aby pokazać element, lewa część pojawia się jako pierwsza i postępuje w prawo. Staram się, aby zaczynał od prawej strony i postępował w lewo.
Wickethewok
1
działa, jeśli umieścisz element w prawo. Inaczej. możesz chcieć anulować lewą właściwość i przesuwać element podczas zmniejszania go.
bendewey
1
Zmiana elementu na unoszący się „w prawo” nie odwróciła dla mnie slajdu. Wyjaśniłem powyżej, jeśli to pomaga.
Wickethewok
2
Dziękuję bardzo! Nie wiedziałem, że to część efektów jQuery. Dałbym +2, gdybym mógł!
Wickethewok
4
Link do źródła dwóch skryptów interfejsu użytkownika to teraz: jquery-ui.googlecode.com/svn/tags/latest/ui/… i „ jquery-ui.googlecode.com/svn/tags/latest/ui/…
Muleskinner
34

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

vdboor
źródło
Jak można sprawić, by robili ten sam efekt przy odpowiednim przesuwaniu?
Jayant Varshney,
@JayantVarshney: upewnij się, że blok jest wyrównany do prawej strony, prawdopodobnie z jakimś wewnętrznym blokiem. Ten kod zmniejsza tylko szerokość. Jeśli Twój CSS sobie z tym poradzi, będziesz miał prawy slajd
vdboor
Dzięki ... Ale chcę zarówno wpływu na samym div .. jak otwór od strony prawej do lewej, a następnie zamyka się od lewej do prawej lub odwrotnie ...
Jayant Varshney
A co z przełączaniem klas podczas wywołania zwrotnego zakończenia? :-)
vdboor
Dzięki, użyłem animacji CSS3, aby osiągnąć tę funkcjonalność
Jayant Varshney,
9

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);
    });
}
thebhatta
źródło
1
To jest dokładnie to, czego potrzebowałem bez włączania interfejsu użytkownika jQuery. Właśnie dodałem krycie i szerokość jako parametry. ... = function(opacity, speed, width, fn) {...}
Dylan Valade
1
To zdecydowanie najlepsze rozwiązanie. Nie ma potrzeby dodawania kolejnych bibliotek. Dziękuję Ci.
hosseio
5

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);
                });
            }
        });
Steve Grove
źródło