jQuery slayt sol ve

Question

aşağıda görüldüğü gibi slideUp() ve slideDown() benzer şekilde çalışır birkaç fonksiyonları ile slideRightShow() ve slideLeftHide() denilen jQuery etkileri genişletilmiş gösteriyor. Bununla birlikte, slideLeftShow() ve slideRightHide()'u da uygulamak istiyorum.

Ben bu tür bir şey teklif önemli kütüphaneler vardır biliyor

(I javascript dosyaların başka büyük kümesi ekleyerek önlemek istiyorum), ama herkes nasıl uygulanacağı basit bir örnek sağlayabilir ya slideLeftShow() veya 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() { 
     ??? 
    }); 
    } 
}); 

yukarıda slideRightShow fonksiyonu, sol taraftan bir görüntüyü gösteren başlar ve sağ tarafına doğru devam eder. Aynı şeyi yapmanın bir yolunu arıyorum, ancak sağdan başlayıp soldan'a doğru ilerleyin. Teşekkürler!

DÜZENLEME

ihtiyacım gibi jQuery Arayüzü (Temelde işlevleri "sol dışarı kaydırın" "sağ slayt" onların ihtiyaç ve) bir şey vardır, ama bu jQuery 1.3 ile çalışmak için alamadım: http://interface.eyecon.ro/demos/ifx.html. Ayrıca, demoları da bir milyon hata atmadan önce sadece bir kez bir slayt yapacak gibi kırılmış gibi görünüyor.

Answer 1

Bu özellik jquery ui http://docs.jquery.com/UI/Effects/Slide'un bir parçası olarak eklenmiştir, eğer bunu kendi isimlerinizle genişletmek isterseniz bunu kullanabilirsiniz.

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

aşağıdaki referanslar

gerekecektir

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

Answer 2

dolgu ve kenar boşlukları ... eklenen hız/geri arama argümanlar ile

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

unutma, tam bir damla var

- slideUp() ve slideDown() için yedek.

Answer 3

jQuery kitaplığınıza bu satırı kendi komut dosyanızda ekleyerek yeni bir işlev ekleyebilir ve fadeSlideRight() ve fadeSlideLeft()'u kolayca kullanabilirsiniz.

Not: Animasyon genişliğini, 750px örneğinin örneğinde olduğu gibi değiştirebilirsiniz.

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

Answer 4

Ve hızını değişir ve geri aramalar dahil etmek istiyorsanız sadece bu gibi onları ekleyin: http://stackoverflow.com/questions: Gönderimimi güncellenmiş

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