Question

我甚至不确定这是否可行，但我希望将盲目和淡化结合起来。

通过改变元素的不透明度来淡化，而我认为通过改变宽度/高度来实现盲目。

我的目标是创建一个动画，其中元素的边缘会在屏幕上消失，也就是盲目和淡化的组合。我不知道是否有一个术语。

但无论如何，这有可能做到，如果是这样的话？

Answer 1

$("#box").animate({height:'0',opacity:'0'}, { complete: function() {this.remove()} });

只需使用动画？

Answer 2

我知道这是前一段时间被问过的，但是现在这可以用jquery / jqueryui来完成，如下所示：

$('#test').hide("blind", { direction: "horizontal" }, 1500)
    .fadeOut(1500)
    .dequeue();

您也可以反复调用.dequeue()来同时使用多个功能：

$('#test').hide("blind", { direction: "horizontal" }, 1500)
    .hide("slide", { direction: "left" }, 1500)
    .fadeOut(1500)
    .dequeue()
    .dequeue();

以上将使用幻灯片和隐藏效果隐藏＆＃34;测试＆＃34;同时褪色。这是一个jsfiddle演示：

http://jsfiddle.net/DirectCtrl/rVp35/1/

Answer 3

使用jQuery animate()功能。这基本上允许您在一段时间内在CSS值（从对象开始的任何内容到您定义的值）之间进行线性插值。所以你可以用它来改变你自己的不透明度和宽度，以达到你想要的效果。

小心这样做，因为你需要考虑所有不透明度的变体，因为IE还不支持标准的“opacity：value;”之一。

Answer 4

我现在想到的解决方案是将褪色元素分解为1px片段，然后在发生眩光的同时单独淡化每个像素。我无法想象当前的浏览器会如此流畅。

我只是暂时称之为“不可能”。

Answer 5

实现这一目标的最简单方法是使用jQuery UI以及toggleClass或addClass函数。这些函数的作用是从一个类动画到另一个类，所以基本上你只需要定义一个开始状态和一个结束状态，这些函数将处理其余的事务。

希望这会有所帮助！

点击here获取小提琴

<强> CSS

.divHidden{
    height: 150px;
    opacity: 0.0;
    width: 0px; /*Set to 0 so div is not visible */
    overflow: hidden;
    background: yellow;
}

.divShown{
    opacity: 1.0;
    width: 100px;
}

<强> HTML

<button>Click me</button>
<div id="test" class="divHidden">Testing</div>

<强>的Javascript

$('button').click(function(){
    $('#test').addClass('divShown', 2000);
});

Jquery UI：结合盲目和淡入淡出效果

5 个答案: