【问题标题】:Modify animate function with JQuery用 JQuery 修改动画函数
【发布时间】:2011-07-18 22:09:34
【问题描述】:

我有下面的功能,可以很好地解决问题,但不是单击 #featured li.block div 来使 div 旋转;如何与类按钮 a.button 建立链接?可点击以使 #featured li.block div div 旋转?

$('#featured li.block div').click(function()
{
    var f = function($this, count) 
    {
        $this.animate({
            top: "-=200"
        }, 70, function() {
            $this.css('top', '220px').animate({
                top: "-=220"
            }, 70, function() {
                if (count > 0) {
                    count = count - 1;
                    f($this, count);

                    /*if(count == 0) {
                        if ($this.hasClass('showing')) {
                            $this.removeClass('showing').addClass('hiding').hide();
                        }
                    }*/
                }
            });
        });
    };
    f($(this), 8);
});

【问题讨论】:

  • 当您以问候语开始您的帖子时,它会将有用的信息从问题页面上显示的摘要中推出。我们通常更喜欢信息而不是寒暄。
  • 好吧,我只是想打个招呼,不过没关系

标签: jquery function jquery-animate


【解决方案1】:

使用a.button 作为点击处理程序的选择器和函数调用的原始选择器。

编辑无论选择器具有多个内部 DIV,我都无法让您的代码正常工作。试试这个(奖励,它更简单):

$('a.button').click(function()
{
    var f = function($this, count) 
    {
        $this.animate({
            top: "-=200"
        }, 70, function() {
            $this.css('top', '220px').animate({
                top: "-=220"
            }, 70, function() {
                if (count > 0) {
                    f($this, --count);
                }
            });
        });
    };
    $('#featured li.block div').each( function(i) {
        var $this = $(this);
        setTimeout( function() {
               f( $this, 8 );
        }, i*100 ); // the ith div will start in i*100ms
    });
});

【讨论】:

  • @Keith - 以为您想更改触发器元素,您可以将新选择器添加到旧选择器,如我所示。确保更新处理程序末尾的代码行,否则它不会将动画应用到正确的元素。
  • 哇,很好用,div 不会一直下​​降,但我想我可以改变这一点。另外,很抱歉增加了 2 个问题。 1.) 假设我有 2 个 div:
  • aaa
    aaa
  • 如何在每次点击时交换它们?
  • @Keith - 经过几次调整后,您的滚动设备再次工作。我已更新,您可以在 jsfiddle.net/mx7Zh 找到它。不确定你所说的交换是什么意思,你的意思是切换它们的可见性?假设一个开始可见而另一个不可见,只需执行$('...li.block div').toggle();
  • 非常感谢您抽出时间看电视,您为我节省了很多时间!!
  • @Keith - 必须稍作修正才能为 setTimeout 函数捕获 $(this)。这里的工作代码:jsfiddle.net/Nku7T
  • 猜你喜欢
    相关资源
    最近更新 更多
    热门标签