Слайд DIV справа налево с jQuery

Я использую код jQuery для анимации div слева направо при загрузке, а затем, нажав кнопку закрытия, div скрывается справа налево. Он работает отлично, он просто не идет вправо, горизонтально, но по диагонали. Что я делаю не так? Вот пример кода, я использую http://jsfiddle.net/N8NpE/2/Слайд DIV справа налево с jQuery

$(function(){ 
    $("#content-box").hide(0).delay(0).show(500); 
}); 

$(function(){ 
    $("#ClosePanel").click(function() { 
     $("#content-box").hide("slow"); 
    }); 
});

Любая помощь будет принята с благодарностью.

источник

2013-10-06 Mr. Bacan

Вы можете попробовать использовать .animate() вместо .hide() и .show(). Это даст вам немного больше контроля над всем.

$("#content-box").animate({'width': 240},500);

И закрыть, включить функцию обратного вызова, чтобы установить дисплей ни после анимации:

$("#content-box").animate({'width': 0},500,function(){ 
     $("#content-box").css('display','none'); 
});

http://jsfiddle.net/N8NpE/6/

источник

2013-10-06 04:33:37

Все выложенные методы работали, но мне это понравилось лучше, потому что он дает больше контроля, как вы сказали. Единственное, что он не скользит, он просто появляется, и когда он закрывается, он скользит вправо, но он сжимает текст, а не скользя. Вот ссылка [http://www.azurpanama.com/index.php?page=fullbg-test], где я использовал скрипт. –

Сначала вы должны указать ширину 0 на этом элементе в вашем css, в качестве отправной точки для вашей анимации. Что касается текста «сжимания», чтобы избежать того, что вам придется иметь обертку вокруг текста с фиксированной шириной, а затем установить «overflow: hidden;» в окне содержимого (элемент, который является анимирующим, а не дочерним с фиксированной шириной). Таким образом, поле содержимого будет уменьшаться по ширине, но содержимое останется фиксированной. –

Большое спасибо Блейк, он отлично поработал. Однако есть небольшая проблема. Мне нужно добавить задержку 5 секунд, прежде чем поле соскальзывает вправо, поэтому я добавил .delay (5000) в код «$ (« # content-box »). Delay (5000) .animate ({'width': 300}, 1000);» и теперь он сначала показывает текст, и через 5 секунд он исчезает и запускает анимацию по своему усмотрению. [Вот пример] (http://azurpanama.com/index.php?page=fullbg-test) –

Вы должны включить JQuery UI в сценарии и изменить ваши функции немного:

$(function(){ 
$("#content-box").hide(0).delay(0).toggle('slide', { 
     direction: 'left' 
    }, 1000); 
});

Вот обновленный jsfiddle: http://jsfiddle.net/N8NpE/4/

источник

2013-10-06 04:30:03

Спасибо Максим, этот код работал и очень полезно bu t Я пытаюсь загрузить меньше скриптов на страницу. Но я обязательно буду использовать его в других проектах. –

$('#content-box').animate({width: 'toggle'});

http://jsfiddle.net/U7wGt/

источник

2013-10-06 04:34:26 Joseph

Как и все остальные, этот тоже работал, но я пытаюсь уменьшить использование кодов загрузки. Спасибо за помощь Джозефу. –

Слайд DIV справа налево с jQuery

ответ

Смежные вопросы