标签: slideup

我有下面的代码像魅力:

var div = $('#div');
div.html('<div>one line</div><div>another line</div>');
div.slideDown('slow');

但是当我需要更改内容(行数)时问题就出现了:

div.html('<div>one line replacement</div><div>another line replacement</div><div>third line</div>')

这种转变太快了.如何动画这个？

我正在尝试实现一个非常简单的页脚通知元素,以便向上滑动片刻,然后向下滑动.我正在使用:

$('button').click( function () {
    $('#message-box').slideUp('slow').delay(1500).slideDown('slow');
});

但是,当您单击该按钮时,它会延迟1500毫秒,然后向上滑动,不会向下滑动.

http://jsfiddle.net/jrMH3/17/

做slideUp('slow')和hide('slow')导致相同的动画效果？

示例代码:

$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide('slow');
  });
  $("#show").click(function(){
    $("p").show('slow');
  });
});


<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>

我正在尝试重现新iOS Google地图应用程序的上滑菜单的行为.

所以基本上它是一个视图,您可以向上滑动以平移到某个点或向下滑动到某个点.此视图也可以像分页滚动视图一样向右和向左滑动.

它应该向上或向下滚动或向侧面滑动,但不能同时向两侧滑动.

经过大量的研究和测试后,我有一些接近但不太合适的东西.

我的实现是一个UIScrollView,框架为320x400,内容视图为960x400,带有分页滚动.然后我添加一个UIPanGestureRecognizer来处理整个视图的向上滑动.

这是PanRecognizer的handleTouch IBAction:

- (IBAction)handlePan:(UIPanGestureRecognizer *)sender {
NSLog(@"Panning");
    CGPoint translatedPoint = [(UIPanGestureRecognizer*)sender translationInView:self.view];

    if([(UIPanGestureRecognizer*)sender state] == UIGestureRecognizerStateBegan) {
        _firstX = [[sender view] center].x;
        _firstY = [[sender view] center].y;
    }
    if (!IS_IPHONE_5) {
        if (_firstY < 216)
            translatedPoint = CGPointMake(_firstX, 216);
        else
            translatedPoint = CGPointMake(_firstX, _firstY+translatedPoint.y);
    }
    else {
        if (_firstY < 307)
            translatedPoint = CGPointMake(_firstX, 307);
        else
            translatedPoint = CGPointMake(_firstX, _firstY+translatedPoint.y);
    }
    [[sender view] setCenter:translatedPoint];
    if([(UIPanGestureRecognizer*)sender state] == UIGestureRecognizerStateEnded) {
        CGFloat velocityY = (0.2*[(UIPanGestureRecognizer*)sender velocityInView:self.view].y); …

我正在开发一个应用程序,显示用户并排上传的图像的缩略图.我希望能够显示完整尺寸的图像以及有关它的一些信息.

我的解决办法是让#wrapper向上滑动点击的图像揭示一个网页,其中显示了全尺寸的图像(也许通过I帧的帮助下,目前还不能确定)时.

我正试图让第一步工作,即向上滑动#wrapper.下面的代码应该可以工作,但滑动动画没有显示 - #wrapper只是消失了.如果我.image从图像中删除该类,并添加该行<p class="images">Test</p>并单击它,则滑动有效,但随后图像变得没有样式.

那么这里有什么问题呢？我看到同一主题有几个问题,但所有问题都与使用表有关.

HTML:

<section id="wrapper">
    <div id="blogs">
        <div class="blog">
        <div class="post">
            <img class="images" src="images/image1.png" />
            </div>
        </div>
        <div class="blog">
        <div class="post">
            <img class="images" src="images/image2.png" />
            </div>
        </div>
        <div class="blog">
        <div class="post">
            <img class="images" src="images/image2.png" />
            </div>
        </div>
    </div>
</section>

jQuery:

$('.images').click(function (){
    $('#wrapper').slideUp('slow', function() {
    });
});

CSS:

#wrapper {
    background: yellow;
    margin: 0px auto;
    width: 100%;
    height: 1000px;
    position: relative;
    top: -20px;
    left: 20px;
    text-align: …

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

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

所以我使用了一个非常基本的jQuery .slideDown,它在FF,Safari和Chrome中运行良好.在IE7中根本不起作用.这是脚本:

//Top Mailing List Drop down animation
$(document).ready(function() {
$('div#top_mailing_hidden').hide();

// Expand Panel
$("input#top_mailing").focus(function(){
$("div#top_mailing_hidden").slideDown("slow");
});

// Collapse Panel
$("input#top_mailing").blur(function(){
$("div#top_mailing_hidden").slideUp("slow");
});
});

我已经研究了几个小时,发现了一些与滑动/缩小有关的错误,导致它在用于postion的后代时在IE7中失败:固定元素.这个动画发生在一个位置:固定的导航栏,但是,我已经尝试用位置包装内部元素:相对但无济于事,我仍然在IE中得不到任何东西.另外,请注意nav元素是用jQuery隐藏的,即使在IE7中该函数也能正常工作,但是,滑动/缩小不是.

这是相关的CSS:

/* --------------Top Dropdown Mailing List------------------- */

#top_nav div#top_mailing{
    float: right;
    width: 351px;
    padding: 0 10px 10px 5px;
    background: url(images/top_mailing_bg.png) bottom center no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    text-shadow:0 -1px 0px #222;
}
#top_mailing #top_mailing_hidden{
    font-size: .7em;
    text-align: center;
    position: relative;
    height: 30px;
    zoom: 1;
}
#top_mailing #top_mailing_hidden div{
}
#top_mailing #top_mailing_hidden …

这有效,但我不知道为什么.在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");
}

我有一个SlidingUpPanelLayout,它将图像保存为顶视图,还有一个需要滑动的视图寻呼机.它viewpager有3个片段,其中两个是列表视图.所以我希望能够在拉起时扩展视图寻呼机,一旦视图寻呼机启动,我希望能够scrollviews在片段内部滚动.但是当拉下来scrollview以防万一没有滚动时,我想开始崩溃viewpager.因此SlidingUpPanelLayout,如果没有更多要滚动的内容,请建议如何在拉动滚动视图时进行折叠？

在这里,我发布了一些代码:我尝试捕获触摸事件并onInterceptTouchEvent以下列方式覆盖SlidingUpPanel 函数:

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
    if (isHandled) {
        Log.i("interceptToch", "HEREEE");
        return onTouchEvent(ev);
    }
    return false;
}

所以当SlidingUpPanelLayout扩展时,我设置了isHandled = false.因此,当slidingUpPanelLayout展开时,所有触摸事件都将传递给其子视图.

而且我也放入onTouchEvent了scrollView,以便解锁SlidingUpPanelLayout.onInterceptTouchEvent:

public boolean onTouch(View v, MotionEvent event) {
    int action = event.getAction();
    if (action == MotionEvent.ACTION_DOWN) {
        scroll = 0;
        y = event.getY();
    } else if (action == MotionEvent.ACTION_MOVE) {
        if (scroll_view_summary.getScrollY() == 0 && …

我正在开发应该使用导航抽屉作为菜单 bur 以获得更好的用户体验的应用程序我决定用滑动面板替换导航抽屉。

我的观点在这张图片中

现在我想用圆角制作这个菜单，我使用了带有cornerRadius 属性的CardView，但没有正常工作。

这是我的向上滑动面板的 xml 代码

   <com.sothree.slidinguppanel.SlidingUpPanelLayout
        xmlns:sothree="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom"
        sothree:umanoPanelHeight="0dp"
        sothree:umanoShadowHeight="0dp"
        android:id="@+id/SlidingUpPanel">

   
</com.sothree.slidinguppanel.SlidingUpPanelLayout>

在 Facebook Messenger 应用程序中可以看到相同的设计：

欢迎任何想法，提前致谢...

PS：我使用的库链接：Github library

那些想要所有布局的人：

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<include
    android:id="@+id/toolbar"
    layout="@layout/toolbar" />


<com.sothree.slidinguppanel.SlidingUpPanelLayout xmlns:sothree="http://schemas.android.com/apk/res-auto"
    android:id="@+id/SlidingUpPanel"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom"
    sothree:umanoPanelHeight="0dp"
    sothree:umanoShadowHeight="0dp">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#345D7D" />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:orientation="vertical">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.5"
            android:orientation="horizontal">

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.33333">

                <ImageButton
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:layout_centerInParent="true"
                    android:background="?attr/selectableItemBackgroundBorderless"
                    android:scaleType="fitXY"
                    android:src="@drawable/quran_icon" />

            </RelativeLayout>


            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.33333">

                <ImageButton
                    android:layout_width="125dp"
                    android:layout_height="125dp" …