Question

我正在使用jquery animate函数在我的内容div中移动一个块。基本结构如下：

<div class="content">
  <div>block 1</div>
  <div>block 2</div>
  <div>block 3</div>
</div>

我的js：

//main menu clicked:    
    $('#nav').children().click(function(e){
        e.preventDefault();
        var current = $('.selected').index();
        var clicked = $(this).index();
        if(current != clicked){

        if (current < clicked) {
            clickedLeft = 1400
            currentLeft = -1400
            $('#content-'+clicked).css('left', clickedLeft);
        } else {
                clickedLeft = -1400
                currentLeft = 1400
                $('#content-'+clicked).css('left', clickedLeft);
            }

        $('#content-'+current).animate({left: currentLeft}, 1500, 'easeInOutSine', function(){ $('#content-'+current).hide(); });
        $('#content-'+clicked).show().animate({left: 0}, 1500, 'easeInOutSine');


        }
    });

当我点击特定的菜单链接时，相应的div将移动到中心，并且位于中心的div将移动到相反的位置。一切正常但我的块有不同的元素，如img p li等，所以我想以不同的速度移动这些元素。可能吗？或者我应该分别为块的每个元素设置动画？我无法为每个元素添加动画，因为它们是从db中检索的，因此并不总是显示相同的元素。

实例：dida.uz

Answer 1

您应该为div分配不同的动画，但之前必须在有限的时间内计算所需的动画量，这将为您提供正确的速度，然后所有动画将同时结束，从而获得最佳体验。

当然，示例代码将受到赞赏。

jquery以不同的速度动画子元素

1 个答案: