jQuery сдвиньте влево и покажите

111

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

РЕДАКТИРОВАТЬ

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

Wickethewok
источник
Я обновил свой пост, надеюсь, это поможет
bendewey
Связанный: stackoverflow.com/questions/596608/slide-right-to-left
Timo Huovinen

Ответы:

185

Эта функция включена как часть jquery ui 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>
bendewey
источник
Здравствуй! Я ищу обратное тому, что вы там реализовали. В основном, когда я использую то, что у меня есть выше, чтобы показать элемент, левая часть появляется первой и продвигается вправо. Я пытаюсь заставить его начинать с правой стороны и продвигаться влево.
Wickethewok,
1
он работает, если вы перемещаете элемент вправо. В противном случае. вы можете захотеть анимировать левое свойство и перемещать элемент по мере его сжатия.
bendewey
1
Изменение элемента на плавание «вправо» не изменило слайд для меня. Я уточнил выше, помогает ли это.
Wickethewok,
2
Спасибо вам большое! Я не знал, что это было частью эффектов jQuery. Я бы дал +2, если бы мог!
Wickethewok,
4
Ссылка на источник двух скриптов пользовательского интерфейса теперь: jquery-ui.googlecode.com/svn/tags/latest/ui/… и " jquery-ui.googlecode.com/svn/tags/latest/ui/…
Muleskinner
34

Не забывайте отступы и поля ...

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

vdboor
источник
Как заставить их делать тот же эффект с помощью правого скольжения?
Jayant Varshney
@JayantVarshney: убедитесь, что блок выровнен по правому краю, возможно, с каким-то внутренним блоком. Этот код только уменьшает ширину. Если ваш CSS может с этим справиться, у вас будет правильный слайд
vdboor
Спасибо ... Но мне нужны оба эффекта в одном и том же div ... например, открытие справа налево, а затем закрытие слева направо или наоборот ...
Джаянт Варшней
А как насчет переключения классов при обратном вызове завершения? :-)
vdboor
Спасибо, я использовал анимацию CSS3 для достижения этой функциональности
Джаянт Варшней
9

Вы можете добавить новую функцию в свою библиотеку jQuery, добавив эту строку в свой собственный файл сценария, и вы можете легко использовать fadeSlideRight()и fadeSlideLeft().

Примечание: вы можете изменить ширину анимации, как вам нравится, 750 пикселей.

$.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
источник
1
Это именно то, что мне нужно, без включения jQuery UI. Просто добавили непрозрачность и ширину в качестве параметров. ... = function(opacity, speed, width, fn) {...}
Дилан Валад
1
На сегодняшний день это лучшее решение. Не нужно добавлять дополнительные библиотеки. Спасибо.
hosseio
5

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

        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);
                });
            }
        });
Стив Гроув
источник