标签: slidedown

我在两个不同的网站上遇到过这个问题两次.它适用于IE9以外的所有浏览器.

我使用jquery slideup和slideDown打开和关闭div(使用slideToggle时会出现同样的问题).当幻灯片向下滑动时,我能够看到div的内容,但是一旦动画停止,内容就会消失.

下面是这个问题的一个例子http://www.ohnuts.com/searchResults.cfm?criteria=cashews&search=all点击"更多类别"链接.

有没有其他人遇到过这个问题,是否有任何解决方法？我可以改变它只是做一个简单的显示/隐藏,工作正常,但我想保持它打开的效果.

我做了很多次没有问题,但由于某种原因,这是一个问题在这里.向下滑动将开始正常工作(1/3),而不是突然的一切,并完成动画.向上滑动工作正常.如果我也在动画函数中切换不透明度它不会抖动但我的文本会短暂地改变颜色,这就是幻灯片幻灯片(),幻灯片切换和.animate()的情况.

HTML:

<h2>Phthalate Free: </h2><div class="yamikowebsToggler">
    <p>
    Dibutyl Phthalate is linked to cancer and is present in nail polish, perfume, soft plastics and skin care products.
    </p></div>

CSS:我读到其他的是边缘可能导致抽搐,但这没有帮助

    h2{color:#76DEFC; margin:0px;}
    .yamikowebsToggler{margin:0px;}
    p{margin:0px; color;#000000;}

JQUERY:

$(document).ready(function(){
    $(".yamikowebsToggler").fadeOut(0);
    $("h2").click(function()
    {
        $(this).next(".yamikowebsToggler").stop(true, true).animate(
        { height: 'toggle' }, 
        {
            duration: 1000,
        });
    })
});

CSS3动画存在问题.它们不支持"自动"高度属性(以及宽度,边距等).在不知道元素的确切高度的情况下创建CSS3向下滑动动画的最佳方法是什么？

问题类似于这个问题,但是那里接受的答案并没有回答实际问题,因为它们没有处理计算你想要滑动的元素高度的问题.

我正在尝试创建一个界面,其中两个或多个按钮将显示给用户,如果单击一个按钮,将向他显示一些布局.我正在使用SlidingDrawer来实现此目的.

好吧,我对layout_width和layout_height属性感到困惑.

如果我设置如下所示的属性,则屏幕上仅显示"手柄1".

android:layout_width="fill_parent" android:layout_height="wrap_content"

老实说,我对这两个属性都知之甚少.有人可以分享他对他们的了解吗？

main.xml中:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <SlidingDrawer android:id="@+id/slidingDrawer1"
            android:layout_width="fill_parent" android:layout_height="wrap_content"
            android:handle="@+id/handle1"
            android:content="@+id/content1">
                <Button android:text="Handle 1" android:layout_height="wrap_content"
                        android:layout_width="fill_parent" android:id="@+id/handle1"></Button>
                <LinearLayout android:id="@+id/content1"
                        android:layout_width="fill_parent" android:layout_height="wrap_content"
                        android:orientation="vertical" android:gravity="center"
                        android:background="#FF444444">
                        <Button android:text="Handle 1 Item 1" android:layout_height="wrap_content"
                                android:layout_width="wrap_content" android:id="@+id/item1"></Button>
                </LinearLayout>
    </SlidingDrawer>

    <SlidingDrawer android:id="@+id/slidingDrawer2"
            android:layout_width="fill_parent" android:layout_height="wrap_content"
            android:handle="@+id/handle2"
            android:content="@+id/content2">
                <Button android:text="Handle 2" android:layout_height="wrap_content"
                        android:layout_width="fill_parent" android:id="@+id/handle2"></Button>
                <LinearLayout android:id="@+id/content2"
                        android:layout_width="fill_parent" android:layout_height="wrap_content"
                        android:orientation="vertical" android:gravity="center"
                        android:background="#FF444444">
                        <Button android:text="Handle 2 Item 1" android:layout_height="wrap_content"
                                android:layout_width="wrap_content" android:id="@+id/item2"></Button>
                </LinearLayout>
    </SlidingDrawer>     
</LinearLayout>

滑动#resdiv 时,我的JQuery幻灯片动画滞后.

有什么建议？

JQuery的:

$(document).ready(function(){

$('select.first').change(function(){

    $(this).prop('disabled', true);
    var codata = $(this).val();
    var page = 1;

    $.ajax({

        type:'POST',
        url:'page.php',
        dataType:'json',
        data:{country:codata, page:page},
        success: function(data) {

            var result='';
            $.each(data, function(i,e) {
            result += "<div id='outer'>"+e.sDo+'</div>';
            });
            $('#res').html(result);

        }


    }).done(function(){$('#res').slideDown();});

});

});

CSS:

#res {

    background-color:gainsboro;
    border:1px solid gray;
    width:100%;
    display:none;
    padding-top:10px;
}


#outer {

    width:100px; 
    text-align:center; 
    border:1px dotted black;
    margin:0 0 10px 10px;
    display:inline-block;
    height:40px;

}

我发现这篇文章如何在点击时创建滑动DIV？

但所有答案都是Jquery方法.有没有办法用PURE CSS创建它？我还有其他一些事情......

1. 我可以添加什么来使向下滑动div保持滚动状态
2. 将触发动画的链接更改为"关闭",以使div向上滑动

以下是该帖子中示例的链接// http://shutterbugtheme.tumblr.com/

我也试过谷歌搜索,但唯一的结果是jquery方法......

我试图让jQuery的slideDown()动画工作,但在我的情况下,应该向下滑动的文本,只是出现 ..如何使动画显示出来？

我也尝试手动指定速度,但最终结果是一样的.

HTML:

<section class="subscribe">
    <button id="submitBtn" type="submit">Subscribe</button>
    <p></p>
</section>

JavaScript的:

$(function () {
    $("#submitBtn").click(function (event) {
        $(".subscribe p").html("Thanks for your interest!").slideDown({
                        duration: 4000
                    });
    });
});

JSFiddle: http ://jsfiddle.net/ahmadka/A2mmP/

我正在开发一个项目,我不应该使用任何XML文件,并且必须使用滑动Drawer.但我发现滑动抽屉不可能通过java编码,因此我开始制作动画,其中布局应该像滑动抽屉一样向上和向下移动并且什么也没有结束.

有人可以帮我解决这个问题

我试图使用toggle,slideUp和slideDown来显示和隐藏一系列div.我能够将div转换为slideDown,但我无法将其转换为slideUp.我以前没有使用这个脚本,所以我真的很困惑为什么这不起作用.我已经包含了我的脚本和我试图显示和隐藏的div.

快速注意:当我在"隐藏的车辆"div中放置一个普通的旧p标签时,它工作正常.它显示和隐藏像它应该的那样.但是,当我把我的桌子放回那个div时,它没有用.

<script type="text/javascript">
$(document).ready(function() {
    $(".ShowVehicles").toggle(function() {
        $(".HiddenVehicles").slideDown(2000);
        $(this).text("Hide All");
    }, function () {
        $(".HiddenVehicles").slideUp(2000);
        $(this).text("Show All");                
    });
});

<div class="HiddenVehicles" style="display:none; width:730px;">
    (there will be a giant table in here)
    </div>

这有效,但我不知道为什么.在function capIn()我看来,线$botcap.slideDown("slow")应该滑下div.它将它滑起来.如果我尝试使用.slideUp()没有任何事情发生,好像它试图滑下来.任何人都可以向我解释这个吗？

$(".slide").hover(capIn, capOut);

function capIn(){
    //slide top caption down
    var $topcap = $(this).children(".topcap");
    $topcap.slideDown("slow");

    //slide bottom caption up
    //!! Why does slideDown slide caption up here?
    var $botcap = $(this).children(".botcap");
    $botcap.slideDown("slow")
}

function capOut(){
    //slide top back up
    var $topcap = $(this).children(".topcap");
    $topcap.slideUp("slow");

    //slide bottom back down
    var $botcap = $(this).children(".botcap");
    $botcap.slideUp("slow");
}