标签: slidedown

scriptaculous wiki有一个演示(http://github.com/madrobby/scriptaculous/wikis/effect-slidedown),显示正在使用的SlideDown效果.但是,如果隐藏了某个DIV,我需要使用相同的链接向下滑动,如果显示DIV,则需要使用SlideUp.

我该如何实现这一目标？

谢谢.

我有一个页面,其中包含所有用户的下拉列表.当一个人在下拉列表中选择某人时,我会触发ajax调用以获取用户的信息.一切正常.我试图在div中显示ajax调用的结果.

我试过这个:

 function getInfo(id)
{
        $.ajax({
                   type: "GET",
                   url: "users/userInfo.php",
                   data: "userId=" + id,
                   success: function(result){
                     $("#userData").html(result);
                   }
                 });
 $("#userData").hide();
 $("#userData").slideDown('slow');
 };

并且在一个人做出的第一个选择中,它不会滑动,它只是出现.但是,如果该人选择不同的选项,则幻灯片可以完美地运行.我怎么能得到第一个ajax响应滑动？

我添加了.hide(),因为我读到它必须被隐藏才能滑动.我尝试了animate(),这是一场灾难......

我一直在尝试将slideDown()效果用于我正在处理的网站,但是我很难获得我想要的效果.这是一个示例,显示了我想要完成的任务.

<div>
    blahblahblahblah

    <span id="span_more" style="display:none">
        blahblahblah
    </span> 

    <a class="link_more" id="more">More&hellip;</a></div>
</div>

基本上,当单击"更多..."时,我希望当前隐藏的文本使用滑动效果显示,同时保持与可见文本末尾的内联.这似乎不可能使用slideDown(),因为它正在将显示更改为阻止.

非常感谢你.

我想在点击链接后滑动一个div,然后再滑动另一个div,然后转到下一页.
问题:在动画完成之前加载新页面.
问题:我该怎么办？
我应该使用preventDefault然后以某种方式恢复它吗？

这是URL:http://www.jolandaschouten.nl/wordpress

这是代码,现在只对第一个菜单项实现:

jQuery(document).ready(function($){

    var allDivs = $("#introductie").add("#agenda").add("#werk").add("#onderwijs-organisatie").add("#publicaties").add("#links").add("#contact");

    console.log(allDivs);

    $("li.page-item-11 a").click(slideUp);

    function slideUp(){
        allDivs.slideUp(500, slideDown);        
    }
    function slideDown(){            
        $("#introductie").slideDown(500);
    }
});

ps:我不想使用AJAX,因为SEO和浏览器导航问题.点击应该真正导致进入下一页.

我有一个简单的手风琴菜单,我今天使用jQuery slideDown()和slideUp()方法放在一起.示例代码:

<h1>the header</h1>
<div class='thechild'>
the content
</div>

$(function(){

    $('h1').click(function(){
        var next = $(this).next();
        if (next.is(':visible'))
        {
            next.stop().slideUp();
        }
        else
        {
            next.stop().slideDown();
        }             
        return false;
    });

});

这很有效,但是如果你<h1>在动画完成之前再次单击其中一个,那么你可以打破slideUp()或者slideDown()事件.似乎会发生的是,第二次单击时,它将slideUp()高度调零,但如果向下滑动,它将仅向下滑动到其最后一个最大高度 - 即高度.thechild是您最后一次中断动画的高度点击.

我需要的是,根据需要单击一次slideUp或slideDown .thechild,然后再单击一次以停止动画(如果正在运行)并向上滑动.thechild.随后的第三次单击应该向下滑动.thechild到它的全高,而不是在点击#2时中断时的高度.希望一切都有道理:)

我确定我曾经遇到过这个问题并以某种方式解决了它,但是不记得(或谷歌)我提出的解决方案.这仅仅是这些幻灯片方法的限制,并且是一种解决方法,可以animate()通过一些更高的工作来进行我自己的调用吗？

我试过玩你可以传入的各种布尔.stop(),但无济于事.必须有一些我想念的简单,有人能开导我吗？

jsfiddle:http://jsfiddle.net/cY6kX/

重新创建,双击<h1>多次并观察发生的情况,然后再单击几次以查看它将如何破坏,直到您重新加载页面.

任何指针都非常感激

我要做的是将视频保存在.slideDown中直到mouseout文本和视频,这可能吗？这是我的代码,直到现在

#text和#video都是div

JS在这里:

<script> 
 $(document).ready(function(){
  $("#text").mouseover(function(){
   $("#video").slideDown("slow");
  });
  $("#video").mouseout(function(){
   $("#video").slideUp("slow");
  });
 });
</script>

CSS在这里:

#text
{
margin-top:20px;
float:center;
font:VNF-Museo;
font-size:40px;
color: #333;
margin-left:auto;
margin-right:auto;
}

#video
{
display:none;
width:1024px;
height:278px;
}

我找了一个解决方案,但找不到那些接近的东西.谢谢

我有和这些css参数对象:

 position:fixed;
 top:0px;
 left:25%;
 width:50%;
 height: 300px;
 -moz-border-radius-topleft: 0px;
 -moz-border-radius-topright: 0px;
 -moz-border-radius-bottomright: 10px;
 -moz-border-radius-bottomleft: 10px;
 -webkit-border-radius: 0px 0px 10px 10px;
 border-radius: 0px 0px 10px 10px;
 display:none;
 background: -moz-linear-gradient(
        top,
        #807980 0%,
        #3d323d);
 background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#807980),
        to(#3d323d));
 -webkit-box-shadow: 0px 0px 10px rgba(46, 50, 50, 1);
 -moz-box-shadow:    0px 0px 10px rgba(46, 50, 50, 1);
 -o-box-shadow:    0px 0px 10px rgba(46, 50, 50, 1);
 box-shadow:         0px 0px 10px rgba(46, 50, 50, 1);
 opacity: 0.2;

我有这个javascript,我用它向下滑动并向上滑动这个div:

 <script type="text/javascript">
 $(document).ready(function(){
 $('#main_div').click(function(){ …

我的网站上有票务系统.有几个div显示原始票据,然后隐藏在这些div之间的隐藏div显示客户和员工的交互.我想打开一个div,关闭其他div然后如果他们打开另一个div这个和所有其他div关闭显示他们点击打开的那个.

jQuery(document).ready(function () {
    // ****** Click the ticket DIV
    $(".ticket_thread_7").click(function () {

        // Slide the SUB DIVs associated with this ticket
        $(".ticket_threads_7").slideDown("slow");

        // Turn the arrow from DOWN.png to UP.png
        $('.ticket_arrow_7').attr("src", "http://cdn.com/assets/imgs/up.png");

    // ****** If they have click the arrow again    
    }, function () {

        // .. close this ticket
        $(".ticket_threads_7").slideDown("slow");

        // .. also return the image back to normal
        $('.ticket_arrow_7').attr("src", "http://cdn.com/assets/imgs/up.png");

        return false;
    });
});

HTML

<div class="ticket_thread_7">
    <p>I want to return my order <img src="http://cdn.com/assets/imgs/up.png" class="ticket_arrow_7"></p>
    <div …

我有这样的HTML结构: -

<article id="a_post" class="a_post">
<div id="thumbnail">
<img id="shine" src="wp-content/themes/dabanggknight/images/play.png"/>
</div>
<div id="instant_video" class="instant_video">
<span class="close"></span>
    // Some content here
</div>
</article>    
<article id="a_post" class="a_post">
<div id="thumbnail">
<img id="shine" src="wp-content/themes/dabanggknight/images/play.png"/>
</div>
<div id="instant_video" class="instant_video">
<span class="close"></span>
    // Some content here
</div>
</article>

在上面的HTML中,<div id="instant_video" class="instant_video"> <span class="close"></span> // Some content here </div>有一个css display:none;.我想要做的就是当有人点击时 <img id="shine" src="wp-content/themes/dabanggknight/images/play.png"/>我想要滑动div,其id为instant_video,其显示在css中设置为none.

然后当有人点击关闭类的跨度时,它会再次淡出特定的div.

但是我遇到了jQuery选择器的一个严重问题,因为我真的很喜欢它.

我正在使用的代码在所有隐藏的div中滑动,ID为id,instant_video并且问题仍然存在.

我想要做的只是向下滑动包含我点击的图像的article标签内的div.

我目前使用的代码如下: -

jQuery(document).ready(function() {
    jQuery('img#shine').click(function() {
        jQuery('.instant_video').slideDown('fast')
    }); 
});
jQuery(document).ready(function() {
    jQuery('.close').click(function() {
        jQuery('.instant_video').fadeOut('slow') …

我想要的很简单:

我有一个背景容器.容器内部是触发器和隐藏框,如下所示:

<div id="container">

<span id="box-1">Open 1</span> <span id="box-2">Open 2</span> <span id="box-3">Open 3</span> <span id="box-4">Open 4</span> <span id="box-5">Open 5</span> 

<div class="box box-1">Hi! I'm Box 1</div>
<div class="box box-2">Hi! I'm Box 2</div>
<div class="box box-3">Hi! I'm Box 3</div>
<div class="box box-4">Hi! I'm Box 4</div>
<div class="box box-5">Hi! I'm Box 5</div>

</div>

单击触发器后,目标框会向下滑动.如果一个盒子已打开,它会向上滑动,新的目标盒会向下滑动.我有这个工作在网站的不同部分,但在jsfiddle分享有点复杂.我无法正常工作的简单版本在这里:

jsFiddle:slideUp和slideDown问题

似乎slideDown函数在slideUp完成之前启动.我已经将slideDown移到了slideUp回调之外,我得到了同样的反应.我已经处理了持续时间和延迟,但它仍然有同样的问题.

-----编辑-----

我应该注意到,我的目标是让容器在再次扩展之前完全崩溃.