Как открыть слайд-контент с помощью jquery

Мой дизайнер передал мне дизайн Я не уверен на 100%, как делать с jquery и css. Я в основном стараюсь, чтобы пользователь «скользил» по нижнему колонтитулу, чтобы выявить больше конуса.Как открыть слайд-контент с помощью jquery

Мой HTML ..

<div id="footer"> 
    <div id="expandingFooter"> hidden content</div> 
     content that is always visible 
</div>

У меня есть кнопка переключения, что OnClick

$('#expandingFooter').slideToggle();

Это сдвигает расширяющийся содержание колонтитула открытым вниз, а затем скользит обратно вверх, чтобы закрыть. Я бы хотел, чтобы он скользил вверх, а затем закрывался.

Благодаря

источник

2008-12-12 studiothat

Вы можете использовать эффекты JQuery UI 1.6 (Effects Demo Page). Для меня достигли желаемого эффекта.

$('#toggleButton').bind('click', function(e) { 
    $('#expandingFooter').toggle(
     'slide', 
     { easing: 'easeOutQuint', direction: 'down' }, 
     1000 
    ); 
});

Примечание: вы можете играть с параметром ослабления, чтобы получить желаемую гладкость эффекта.

Для этого вам нужны последние версии JQuery и JQuery UI Slide Effect.

источник

2008-12-12 19:07:52 Manik

попробовать что-то вроде этого:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <title>Untitled</title> 
    <script type="text/javascript" src="shared-scripts/jquery-1.2.4b.js"></script> 
    <script type="text/javascript"> 
    <!-- 
    $(document).ready(function(){ 
    $("#footer").click(function() { 
     if ($("#expandingFooter").is(":hidden")) { 
     $("#expandingFooter").show("slow"); 
     } else { 
     $("#expandingFooter").slideUp(); 
     } 
    }); 
    $("#expandingFooter").hide(); 
    }); 
    //--></script> 

</head> 

<body> 
<div id="footer"> 
    <div id="expandingFooter"> hidden content</div> 
     content that is always visible 
</div> 
</body> 
</html>

источник

2008-12-12 18:45:21 cLFlaVA

Мое решение немного трюк. Функция slideUp() так, как вы хотите, не строится в JQuery, потому что способ, которым вы можете ее достичь, зависит от вашего дизайна html/css. Нормальный поток сверху вниз.

Я предлагаю это:

<a id="toggle">Toggle()</a> 

<div id="slide" style="position:relative; height: 100px"> 

    <div id="slideInner" style="position:absolute; bottom: 0; background: lightblue""> 
     <p>Suspendisse potenti. Vivamus libero. Dummy Text</p> 
    </div> 

</div> 


<script type="text/javascript"> 
    $('.hoverable').hover(function() { $(this).find("div").show(); }, 
         function() { $(this).find("div").hide(); }); 

    $('#toggle').click(function() { 
     $('#slideInner').slideToggle(); 
    }); 
</script>

Этот код является лишь примером. Переместите встроенный css на внешний лист. То же самое для javascript.

Если вы хотите, чтобы «слайд» разделился, добавьте обратный вызов функции slideToggle() вызов hide() на div «slide».

источник

2008-12-12 18:51:53

Как открыть слайд-контент с помощью jquery

ответ

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