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
начинает показывать изображение с левой стороны и переходит в правую сторону. Я ищу способ сделать то же самое, но начинаю с правой стороны и продвигаюсь влево. Спасибо!
ИЗМЕНИТЬ
Интерфейс jQuery имеет что-то вроде того, что мне нужно (мне в основном нужны их функции "слайд вправо" и "выворачивать влево" ), но я не мог заставить это работать с jQuery 1.3: http://interface.eyecon.ro/demos/ifx.html. Кроме того, их демо, похоже, сломано, а также будет делать слайд один раз, прежде чем выбросить миллион ошибок.
Ответы
Ответ 1
Эта функция включена как часть 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>
Ответ 2
Не забывайте прописку и поля...
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()
.
Ответ 3
Вы можете добавить новую функцию в свою библиотеку jQuery, добавив эту строку в свой собственный файл script, и вы можете легко использовать 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);
});
}
Ответ 4
И если вы хотите изменить скорость и включить обратные вызовы, просто добавьте их следующим образом:
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);
});
}
});