Как сделать разделение слайдов - PullRequest
Новая
       5

Как сделать разделение слайдов

4 голосов
/ 27 июля 2011

Извините, я действительно новичок в JQUery и хотел бы знать, как мне сделать Div Slide Down?

JQuery сбивает меня с толку и просто нуждается в помощи

Ответы [ 5 ]

3 голосов
/ 27 июля 2011

HTML 

<a id="click_to_slide">Click To Slide Down</a>
<div id="slide_me_down"></div>

CSS 

#slide_me_down {
    display: none;
    width: 100px;
    height: 100px;
    background-color: #000;
}

JAVASCRIPT 

$(document).ready(function () {
    $('#click_to_slide').live('click', function () {
        $('#slide_me_down').slideDown();
    });
});

Вот jsfiddle вышеуказанного кода: http://jsfiddle.net/EfmeW/

Также, если вы хотите, чтобы div slideUp и Down зависели от того, является ли div уже видимым или нет, вы можете использовать .slideToggle () вместо .slideDown ()

2 голосов
/ 29 июля 2011

Попробуйте:

HTML: 

<button id="click_to_slide"></button>
<div id="me_down" style="display:none;">I'm Sliding down</div>

Javascript: 

$('#click_to_slide').click(function () {
        $('#me_down').slideDown();
    });

И дополнительно CSS: 

#me_down {
    color:white;
    width: 100px;
    height: 100px;
    background-color: #000;
}

Попробуйте это,и это будет работать :) 1012 *

0 голосов
/ 27 июля 2011

Когда вы говорите «скользить вниз», вы имеете в виду:

  • , чтобы div отображался путем скольжения вниз: $('#me').slideDown();

или

  • сделать div скользящим вниз: $('#me').css('position','relative').animate({top:'+200'},'slow');

http://jsfiddle.net/rkw79/AnTDk/5/

0 голосов
/ 27 июля 2011

Чтобы сдвинуть элемент вниз, просто используйте это: 

<script type="text/javascript">
$(document).ready(function() {
$('#test').slideDown();
});
</script>

<div id="test" style="background-color:lightgrey;border:2px solid grey;padding:10px;">Hello, this will slide down.</div>

Посмотрите пример здесь: http://jsfiddle.net/WvVf3/1/

Надеюсь, это поможет.

0 голосов
/ 27 июля 2011

Используйте следующее JQuery .Вам понадобится div с классом myDivClass , поскольку JQuery использует CSS-селекторы для поиска элементов.Часть document.ready должна гарантировать, что ваша страница полностью загружена / проанализирована перед выполнением Javascript (это важный шаг). 

 $(document).ready(function() {
   $('.myDivClass').slideDown();
 });

Вот пример JSFiddle для того, чтобы div скользил вниз по кнопке, нажмите.

PS Если вы используете Firebug или Chrome вправо, вы можете попробовать это прямо сейчас на этой странице! 

 $('#hlogo').hide().slideDown('slow');
...