Question

是否可以仅对不透明度进行动画处理，让它沿着div的方向移动？让我们说从左到右？

到目前为止，这是我的代码：只是遗漏了一些左边的内容，如果它甚至可行的话：

$(document).ready(function() {
    $('#box').mouseenter(function() {
        $(this).animate({opacity: ".5"}, 500);
    });
});

Answer 1

您可以使用CSS linear-gradient属性，然后运行动画循环以改变其更改位置。这是一个显示效果的快速JS Fiddle。

基本思想是根据动画进度设置CSS。例如，使用白色背景淡入透明，完成25％即可：

background: linear-gradient(to right,
  rgba(255, 255, 255, 1) 0%,
  rgba(255, 255, 255, 0.25) 25%,
  rgba(255, 255, 255, 0) 100);

在后续步骤中，将0.25和25%更改为当前进度百分比。来自小提琴的Javascript看起来像：

var $child = $('#child');
var steps = 100;
var interval = 20;
var step = 0;
var animationStep = function() {
    if( step >= steps ) return;
    ++step;
    var progress = step / steps;
    var progressPercent = Math.floor(progress*100) + '%';
    $child.css('background',
        'linear-gradient(to right, ' +
            'rgba(255,255,255,1) 0%, ' +
            'rgba(255,255,255,' + progress + ') ' + progressPercent + ', ' +
            'rgba(255,255,255,0) 100%)'
    );
    setTimeout(animationStep, interval);
};
animationStep();

你可以根据颜色，重复使用多个元素等来调整它，但这应该给你基本的想法。

Answer 2

<head>
    <meta charset="utf-8">

    <title>Animation</title>

    <script src="js/jquery-2.0.3.min.js"></script>
</head>

<body>
    <div id="mydiv" style="height:20px; width:49px; opacity:0.5; background-color:green;">
    </div>

    <script>
        $('#mydiv').hover(
            function(){
                $(this).animate({height:40,width:200,opacity:1});
            },
            function(){
                $(this).animate({height:20,width:100,opacity:0.5});
            }
        );
    </script>
</body>

jquery动画只有从左到右的不透明度

2 个答案: