标签: slide

如果从水平菜单快速拖动和释放,菜单将自动滑动一段距离.拖动和释放的速度越快,滑动越多.来源 - > appear.dk

我如何实现这种效果？它与一些复杂的公式有关吗？

我正在尝试创建一个图像滑块(上一个/下一个),这样当我点击"上一个"时图像向左滑动,当我点击"下一个"时,图像向下滑动0.5s的慢速,所以它需要一些动画.当我到达最后一张图片然后点击"下一张"时,我希望图像"向后"运行到第一张图像,当我在第一张图像时点击"上一张",所以它"向前跑"直到最后一个.

我想要JSFiddle显示的相同行为.(但我不需要计时器自动移动图像,也不需要"触发"按钮,只需"上一步"和"下一步").

这里的问题是我的图像没有固定的大小.我以百分比定义宽度并且无法定义高度因为我有响应式设计,所以在调整浏览器窗口大小时图像会调整大小.

jQuery到上一个/下一个动作非常简单,但当我删除/添加"活动"类到我的图像时,我找不到添加此动画的方法(因此它们变得可见或不可见).

我已经尝试并排显示所有图像并仅显示第一个(设置容器宽度等于图像宽度),所以当我点击"下一步"时,我只是将容器"移动"到左边,所以它开始显示下一个图像,但它不起作用,因为一旦我无法定义图像的高度,它们将出现在彼此之下,而不是并排.

的jsfiddle

HTML

<div class="images">
    <img class="active" src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
</div>

<div class="previous">previous</div>

<div class="next">next</div>

CSS

img {
    width: 100px;  
    display: none;
    float: left;
}

img.active {
    display: block;
}

jQuery的

$('.next').on('click', function() {
    var active = $('img.active');
    var next = active.next('img');

    if (next.length) {
        active.removeClass('active');
        next.addClass('active');
    } else {
        active.removeClass('active');
        $('.images img:first').addClass('active');
    }
});

我正在为iPhone(以横向模式运行)(OS 3.0)制作应用程序,我希望当我触摸工具栏按钮时,它会打开一个带有幻灯片效果的视图(类似于触摸'书签'时的效果Mobile Safari的工具栏)从屏幕的底部到顶部.该视图与按钮位于同一XIB文件中.

我怎样才能做到这一点？

提前致谢.

我目前为jQuery幻灯片设置了以下代码.

$(document).ready(function () {
    $('a#slide-up').click(function () {
        $('.slide-container').slideUp();
        return false;
    });
    $('a#slide-toggle').click(function () {
        if ($('.slide-container').is(':visible')) {
            $('.slide-container').slideUp();
            $(this).removeClass('active');
        } else {
            $('.slide-container').slideDown();
            $(this).addClass('active');
        }
    });
});

和HTML:

<a id="slide-toggle"></a>

<div class="slide-container">
     <a id="slide-up"></a>
     >>content<<
</div>

当我点击#滑动切换,类"主动"被应用到它,并div.slide容器滑落揭示的内容和另一个链接到容器滑动备份(即#滑).当我单击#slide-up时,容器会向上滑动,但#slide-toggle仍然处于"活动状态",并且应用了该类.

我想要它,这样当我点击#slide-up时,'active'类就被删除了.我怎样才能做到这一点？

-编辑-

$(document).ready(function() {
    $('a#slide-up').click(function () {
        $('.slide-container').slideUp(function(){
            $('#slide-toggle').removeClass('active');
        });
        return false;
    });

    $('a#slide-toggle').click(function() {
        if ($('.slide-container').is(':visible')) {
            $('.slide-container').slideUp(function() {
            $(this).removeClass('active');
            }
        })
        else {
            $('.slide-container').slideDown();
            $(this).addClass('active');
        }
    });
});

我有一个列表中的章节列表.当用户选择一个章节时,它会被扩展,并且该章节中的子主题列出.当用户选择特定子主题时,其内容将在新屏幕上的webview中加载.一切都很好.但我想在webview上使用一些功能.当用户向上滑动webview时,webview应向上移动,并且屏幕上将显示从底部到上部的新webview(在webview上向上滑动动画)以及下一个子主题内容.当用户向下滑动具有先前子主题内容的web视图时,向下滑动的情况相同.

请帮助如何在webview上提供向上滑动和向下滑动的动画.谢谢

有没有人知道如何在Android市场中实现该栏(分类,特色,顶级付费...)我也在新版SuperUser中看到它,所以我知道它可以做到.谢谢您的反馈!

我有一个4页的网站,我想在4页之间进行幻灯片切换.我不想使用#ID这样做.我想按一个按钮或链接滑动到下一页.我知道这可以使用jQuery完成,我已经看过这样做的网站.请帮忙.提前感谢所有建议,批评和评论.

我正在使用jQuery的slidetoggle,我想知道是否有一种方法可以让它从底部向上滑动,我看到的任何地方似乎无法找到答案,这是我正在使用的代码:

jQuery(document).ready(function(){ 
    jQuery(".product-pic").hover(function(){
        jQuery(this).find('.grid-add-cart').slideToggle('2000', "easeOutBack", function() {
            // Animation complete.
        });
    });
});

我想要Gridview制作日历的动画。当我选择下个月或上个月时，日历项目（天、月）会在单击按钮时动态添加到 gridview 中。

我想在使用 Viewpager 更改月份时创建滑入和滑出动画。我可以使用滑出和滑入动画listener并启动滑入onAnimationEnd()或滑出listener。

问题是我想同时启动此 gridview 上的两个动画（因此 gridview 将同时滑出和滑入），但第二个动画总是覆盖第一个动画，所以我只看到动画中的幻灯片。

有谁知道如何在 gridview 上实现这种动画？

谢谢

我有一个问题,我无法弄清楚.我正在使用bootstrap的旋转木马,一切正常,除了过渡:当滑动过渡开始时,下一个项目出现在myCarousel div之外,之前的活动项目滑出myCarousel div,因为它们被我的下一个项目替换.

这是我的HTML代码:

<div id="myCarousel" class="carousel slide span6">
     <div id="carousel-inner">
            <div class="active item">
                 <img src="img/abstract-landscape-paintings-bursting-sun.jpg" />
             </div>
             <div class="item">
                  <img src="img/charnwood_forest_landscape.jpg" />
             </div>
      </div>
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

我只使用轮播脚本:

    $(document).ready(function() {
    $(".carousel").carousel({
        interval: 5000,
        pause: "hover",
    });
});

这是我的问题示例的链接,因此您可以检查我的整个代码:http://todoapp.nfshost.com/slide

谁能看出问题是什么？

谢谢!