jQuery слайд влево и показать

Question

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 функция начинает показывать изображение с левой стороны, и он прогрессирует в сторону правой стороны. я ищу какой-то способ сделать то же самое, но начать с правой стороны и двигаться влево. Спасибо!

EDIT

интерфейс jQuery имеет что-то вроде того, что мне нужно (мне в основном нужны их функции "slide in right" и "slide out left"), но я не мог заставить это работать с jQuery 1.3: http://interface.eyecon.ro/demos/ifx.html . Кроме того, их демонстрация, похоже, сломана, а также она будет делать слайд только один раз, прежде чем выбросить миллион ошибок.

654 4

jQuery effects

4 ответов:

Comments

Ничего не найдено.

bendewey · Accepted Answer · 2012-08-22 12:43:02

эта функция включена как часть пользовательского интерфейса jQuery 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>

vdboor · Accepted Answer · 2012-12-04 14:37:31

не забудьте про отступы и поля...
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().

thebhatta · Accepted Answer · 2012-07-10 10:32:17

вы можете добавить новую функцию в свою библиотеку 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);
    });
}

Steve Grove · Accepted Answer · 2013-01-31 02:18:45

и если вы хотите изменить скорость и включить обратные вызовы, просто добавьте их следующим образом:

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